js如何实现0ms延时定时器

小编给大家分享一下js如何实现0ms延时定时器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

示例如下

(function() { var timeouts = []; var messageName = "zero-timeout-message"; // Like setTimeout, but only takes a function argument.  There's // no time argument (always zero) and no arguments (you have to use a closure) function setZeroTimeout(fn) {  timeouts.push(fn);  window.postMessage(messageName, "*"); } function handleMessage(event) {  if (event.source == window && event.data == messageName) {   event.stopPropagation();   if (timeouts.length > 0) {    var fn = timeouts.shift();    fn();   }  } } window.addEventListener("message", handleMessage, true); // Add the one thing we want added to the window object. window.setZeroTimeout = setZeroTimeout;})();

作者还提供了一个demo页面【3】，通过于setTimeout(0)进行对比，在我浏览器的执行结果如下：

100 iterations of setZeroTimeout took 15 milliseconds.
100 iterations of setTimeout(0) took 488 milliseconds.

根据结果对比来看，setZeroTimeout执行比setTimeout快了上百倍，这是一个巨大的提升。今天想讨论的是除了上述这种方式，还可以通过哪些方式来实现一个0ms延时的定时器呢，首先，我们要确定一下我们自定义的定时器是异步的，其次是尽可能早的被执行。说起异步，js提供了好几种解决方案，我们可以逐一去验证。

在深入讨论各种实现方式之前，约定提供的setTimeout对比版本如下，后面自定义实现的方案都将和setTimeout版本的执行时间进行对比，代码比较简单：

(function() { let i = 0; const start = Date.now(); function test() {  if(i++ < 100) {   setTimeout(test);  } else {   console.log('setTimeout执行时间:', Date.now() - start);  } } setTimeout(test);})();

queueMicrotask

queueMicrotask这个api可以添加一个微任务，使用比较简单，直接传递一个回调函数即可，具体实现如下：

(function() { function setZeroTimeout(fn) {  queueMicrotask(fn); } let i = 0; const start = Date.now(); function test() {  if(i++ < 100) {   setZeroTimeout(test);  } else {   console.log('setZeroTimeout执行时间:', Date.now() - start);  } } setZeroTimeout(test);})();

通过和setTimeout版本进行对比，最终结果如下：

setZeroTimeout执行时间: 2
setTimeout执行时间: 490

关于这个API的介绍在MDN上有详细的说明，就不展开介绍了，这里多说一点，根据规范文档的说明，大多数情况下，推荐使用requestAnimationFrame()和requestIdleCallback()等api，因为queueMicrotask会阻塞渲染，在很多时候都不是一种好的实践。

async/await

async/await对于前端开发人员来说已经是必不可少的了，这里我们也可以用来实现：

(function() { async function setAsyncTimeout(fn) {  Promise.resolve().then(fn); } let i = 0; const start = Date.now(); async function test() {  if (i++ < 100) {   await setAsyncTimeout(test);  } else {   console.log('setAsyncTimeout执行时间:', Date.now() - start);  } } setAsyncTimeout(test);})();

通过和setTimeout版本进行对比，最终结果如下：

setAsyncTimeout执行时间: 2
setTimeout执行时间: 490

如果不嫌麻烦，还可以通过Promise来实现，其实都是大同小异，无非多些点代码，这里就省略了。

MessageChannel

MessageChannel允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据，MessageChannel提供端口的概念，实现端口之间的通信，比如worker/iframe之间的通信。

(function() { const channel = new MessageChannel(); function setMessageChannelTimeout(fn) {  channel.port2.postMessage(null); } channel.port1.onmessage = function() {    test(); }; let i = 0; const start = Date.now(); function test() {  if(i++ < 100) {   setMessageChannelTimeout(test);  } else {   console.log('setMessageChannelTimeout执行时间:', Date.now() - start);  } } setMessageChannelTimeout(test);})();

通过和setTimeout版本进行对比，最终结果如下：

setMessageChannelTimeout执行时间: 4
setTimeout执行时间: 490

第三种方式运行时间比前面两种更长些，因为通过MessageChannel产生的是宏任务，其他两种是微任务，微任务执行靠前，且会阻塞主线程，因此时间会长一点。

以上是“js如何实现0ms延时定时器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！