關于 setImmediate

Ethan815 發布于2019-08-22 10:42 / 1693人閱讀

摘要：受到了和的抵制?；驹硎牵判驎r將每一步的交換操作放在回調中，對比排序完成的效率。一共有四種關于前兩種的時間間隔問題，建議直接取讀底部的說明。

原文作者:文藺
原文地址: http://www.wemlion.com/2016/f...
轉載請保留此聲明。

W3C Draft

文檔地址

題目叫 “Efficient Script Yielding”，一份 2011 年的 “Editor"s Draft”，從題目就能看出用途。建議有時間讀一遍，超級短。摘要就一句話：

This specification defines an interface for web applications to flush the browser event queue and receive an immediate callback.
本說明文檔定義了一個用于刷新瀏覽器事件隊列、接收即時回調的 Web 應用接口。

MDN

文檔地址

MDN 的文檔沒得說。遇到問題去查查肯定不會害你，有時候運氣好，還能讀到翻譯過來的中文版：

This method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates.
該方法用來把一些需要長時間運行的操作放在一個回調函數里,在瀏覽器完成后面的其他語句后,就立刻執行這個回調函數。

但同時，文檔提到， 只有 IE 10+ 和 Node.js 0.10+ 實現了該方法。setImmediate 受到了 Gecko 和 Webkit 的 “resistance”（抵制）。建議跟著去看看熱鬧。

MDN 文檔中提到了三種模擬 setImmediate 的方式：postMessage、MessageChannel、setTimeout(fn, 0)。

setImmediate polyfill

源碼

對于 Node 0.9 之前的，使用 process.nextTick 模擬；對于非 IE 10 的現代瀏覽器，使用 postMessage；對 Web Worker，使用 MessageChannel（這個之后需要關注下）；對 IE 6–8，向 html 中插入新的 script 標簽，在 onreadystatechange 事件中執行回調；其他瀏覽器，統一使用 setTimeout(fn, 0) 的形式。

// Don"t get fooled by e.g. browserify environments.
if ({}.toString.call(global.process) === "[object process]") {
    // For Node.js before 0.9
    installNextTickImplementation();

} else if (canUsePostMessage()) {
    // For non-IE10 modern browsers
    installPostMessageImplementation();

} else if (global.MessageChannel) {
    // For web workers, where supported
    installMessageChannelImplementation();

} else if (doc && "onreadystatechange" in doc.createElement("script")) {
    // For IE 6–8
    installReadyStateChangeImplementation();

} else {
    // For older browsers
    installSetTimeoutImplementation();
}

Nicholas C. Zakas 的文章

文章地址

文章很短，但講得還挺仔細的。作者提到了兩點好處：

可以直接在 UI 隊列清空后直接插入 JS 任務；

延遲更短，不必等待下一次 timer tick

Edge Demo

Demo 地址

通過 250 個數的排序，來對比處理效率。基本原理是，排序時將每一步的交換操作放在回調中，對比排序完成的效率。一共有四種：

setTimeout(fn, 15)

setTimeout(fn, 4)

PostMessage

setImmediate

關于前兩種的時間間隔問題，建議直接取讀 demo 底部的說明。已經很詳細了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91107.html

前端碎碎念之 nextTick, setTimeout 以及 setImmediate 三者的執行

摘要：更多文章請前往我的個人博客這個問題是有關執行順序和的。其中，整體代碼，可以理解為待執行的所有代碼。當隊列執行完后再執行一個任務。然后再次回到新的事件循環。所以兩個執行完后隊列里只剩下第一個里的。『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎但是容易遺忘的知識點，你也可能會在面試中碰到。我會查閱一些資料并可能加上自己的理解，來記錄這些問題。更多文章請前往我...

Cciradih 2019-08-21 11:30 評論0 收藏0
由setTimeout和setImmediate執行順序的隨機性窺探Node的事件循環機制

摘要：問題引入接觸過事件循環的同學大都會糾結一個點，就是在中和執行順序的隨機性。當隊列被執行完，或者執行的回調數量達到上限后，事件循環才會進入下一個階段。嵌套的在下一個事件循環的階段執行回調輸出嵌套的。問題引入接觸過事件循環的同學大都會糾結一個點，就是在Node中setTimeout和setImmediate執行順序的隨機性。比如說下面這段代碼： setTimeout(() => { ...

marek 2019-08-26 11:35 評論0 收藏0
淺析 event-loop 事件輪詢

摘要：如果執行的準備時間大于了，因為執行同步代碼后，定時器的回調已經被放入隊列，所以會先執行隊列。 showImg(https://segmentfault.com/img/remote/1460000018998584); 閱讀原文瀏覽器中的事件輪詢 JavaScript 是一門單線程語言，之所以說是單線程，是因為在瀏覽器中，如果是多線程，并且兩個線程同時操作了同一個 Dom 元素，...

2501207950 2019-08-23 12:18 評論0 收藏0
Node中的事件循環

摘要：的事件循環一個線程有唯一的一個事件循環。索引就是指否還有需要執行的事件，是否還有請求，關閉事件循環的請求等等。先來看一下定義的定義是在事件循環的下一個階段之前執行對應的回調。雖然是這樣定義的，但是它并不是為了在事件循環的每個階段去執行的。 Node中的事件循環如果對前端瀏覽器的時間循環不太清楚，請看這篇文章。那么node中的事件循環是什么樣子呢？其實官方文檔有很清楚的解釋，本文先從n...

lwx12525 2019-08-26 11:00 評論0 收藏0
Vue nextTick 機制

摘要：而和的延遲明顯是小于的。因為的事件機制是通過事件隊列來調度執行，會等主進程執行空閑后進行調度，所以先回去等待所有的進程執行完成之后再去一次更新。因為首先觸發了，導致觸發了的，從而將更新操作進入的事件隊列。這種情況會導致順序成為了。背景我們先來看一段Vue的執行代碼： export default { data () { return { msg: 0 ...

Rindia 2019-08-22 16:48 評論0 收藏0