JS 事件環(huán)

JS 程序的運行是離不開事件環(huán)機制的，這個機制保證在發(fā)生某些事情的時候我們有機會執(zhí)行一個我們事先預定好的函數，事情發(fā)生的時候 JS 會將相應的函數入棧執(zhí)行然后出棧，但是關于事件環(huán)我們還有一些未知的東西，例如，setTimeout 我們習慣稱他為定時器，但是可能很多人沒有意識到，這個東西和我們常用的一些事件沒什么不同，只不過我們通常所說的事件大多需要用戶觸發(fā)，而 setTimeout 不用用戶自己觸發(fā)，而是指定時間之后觸發(fā)；那么問題來了，如果我們將時間設置為 0 會發(fā)生什么？會立即執(zhí)行么？

setTimeout、DOM或者 HTTP請求這部分其實并不在 v8 引擎中，這些屬于 web API，javascript 是一個單線程的語言，也就意味著一次只能做一件事情，這個事實從未改變

執(zhí)行原理

JS 中所有的方法都會被推入棧中執(zhí)行，執(zhí)行完成被彈出，在遇到異步代碼的時候，例如 setTimeout MutationObserver Promise 異步的部分會由其他掌管 webAPI 的地方執(zhí)行，等異步有結果之后，回調函數會進入相應的隊列，Promise MutationObserver 回調進入微任務隊列，setTimeout setInterval requestAnimationFrame 進入宏任務隊列。等待主線程的執(zhí)行?？樟?，微任務隊列立刻被推入棧中執(zhí)行，執(zhí)行完畢開始執(zhí)行宏任務隊列

一個經典的例子

html

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

js

// Let’s get hold of those elementsvar outer = document.querySelector(’.outer’);var inner = document.querySelector(’.inner’);// Let’s listen for attribute changes on the// outer elementnew MutationObserver(function () { console.log(’mutate’);}).observe(outer, { attributes: true,});// Here’s a click listener…function onClick() { console.log(’click’); setTimeout(function () { console.log(’timeout’); }, 0); Promise.resolve().then(function () { console.log(’promise’); }); outer.setAttribute(’data-random’, Math.random());}// …which we’ll attach to both elementsinner.addEventListener(’click’, onClick);outer.addEventListener(’click’, onClick);

以上代碼在，手動點擊 inner 元素的時候會有如下輸出

clickpromisemutateclickpromisemutatetimeouttimeout

截止 2020年8月份 chrome edge opera firefox 的結果是統(tǒng)一的，但是在此之前的版本可能會有不同的輸出。

一個奇怪的現象

上述代碼我們不使用手動觸發(fā)點擊，而是使用 inner.click() 觸發(fā)點擊，其結果會有很大的不同

clickclickpromisemutatepromisetimeouttimeout

造成以上巨大差異的原因是，手動點擊，不是通過函數進入執(zhí)行棧的方式觸發(fā)點擊事件的回調，所以inner 的回調執(zhí)行完了主線程中的執(zhí)行棧就是空的可以直接執(zhí)行隊列中任務，然后事件冒泡導致的回調函數才被推入棧運行；而 click 方法的點擊則是通過將 click 推入棧中執(zhí)行來達到的，inner 的點擊回調執(zhí)行完了之后 click 方法并沒有被彈出棧，而是直接執(zhí)行冒泡的下一個回調，由于下一個回調有一個重復的 屬性設置 這是不會重復觸發(fā) MutationObserver的所以 mutate 的輸出只會有一個。等所有的冒泡回調被執(zhí)行完畢 click 函數才會被彈出棧。

最后注意，瀏覽器會盡量預先執(zhí)行較為敏感的操作。

以上就是淺談javascript事件環(huán)微任務和宏任務隊列原理的詳細內容，更多關于JavaScript 事件環(huán)的資料請關注好吧啦網其它相關文章！