原文：https://www.404forest.com/2017/07/18/how-javascript-actually-works-eventloop-and-uirendering/

結論:

微隊列的執行，是“見縫插針”的，只要主線程調用棧為空，直接就會執行，它會抓住每一個空擋

一個小例子

構建兩個嵌套的dom，給他們設置上相同的click事件

<div class="outer">
  <div class="inner"></div>
</div>

let $outer = document.querySelector('.outer')
let $inner = document.querySelector('.inner')
function onClick() {
  console.log('click!')
  setTimeout(() => {
    console.log('setTimeout!')
  }, 0)
  Promise.resolve().then(() => {
    console.log('Promise!')
  })
}
$outer.addEventListener('click', onClick)
$inner.addEventListener('click', onClick)
// $inner.click() 在第二個測試中，我們通過 Javascript 觸發 click 事件

image.png

情況一：點擊內部的黃色dom，讓事件自然冒泡上去
情況二：用dom.click()來觸發某個事件

兩種情況的輸出結果

• 第一種

click!
Promise!
click!
Promise!
setTimeout!
setTimeout!

image.png

• 第二種

click!
click!
Promise!
Promise!
setTimeout!
setTimeout!

image.png