关于 setImmediate

Ethan815 发布于2019-08-22 10:42 / 1595人阅读

摘要：受到了和的抵制。基本原理是，排序时将每一步的交换操作放在回调中，对比排序完成的效率。一共有四种关于前两种的时间间隔问题，建议直接取读底部的说明。

原文作者:文蔺
原文地址: 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 底部的说明。已经很详细了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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