js实现0ms延时定时器的几种方式

显示全部楼层

queueMicrotask
async/await
MessageChannel
末了
附录

这两天看到一篇先容《怎样实现准时的 setTimeout？》的文章，文章开端于一道口试题：有什么办法让setTimeout准时呀？详细文章内容可查看附录【1】，看完之后，引起了我对setTimeout这个函数的探究兴趣，因此在MDN上重新查阅了相干文档，此中提到【最小延时 >=4ms】的一点，因此使用setTimeout不能实现0ms延时的定时器，如果要实现的话，提供了一个参考链接【2】，作者的实现思绪是通过postMessage来模仿，绕过setTimeout的限定，从而实现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++ &lt; 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++ &lt; 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++ &lt; 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++ &lt; 100) {
   setMessageChannelTimeout(test);
  } else {
   console.log('setMessageChannelTimeout执行时间:', Date.now() - start);
  }
 }
 setMessageChannelTimeout(test);
})();
复制代码

通过和setTimeout版本举行对比，最闭幕果如下：

setMessageChannelTimeout执行时间: 4
setTimeout执行时间: 490
复制代码

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

末了

本文提供了三种实现方式，都是围绕js提供异步解决方案来实现的，实现自己并不复杂。

附录

【1】https://mp.weixin.qq.com/s/QRIXBoKr2dMgLob3Atq9-g
【2】https://dbaron.org/log/20100309-faster-timeouts
【3】https://dbaron.org/mozilla/zero-timeout

到此这篇关于js实现0ms延时定时器的几种方式的文章就先容到这了,更多相干js 延时定时器内容请搜刮脚本之家从前的文章或继承浏览下面的相干文章希望各人以后多多支持脚本之家！

工作时间

工作时间

js实现0ms延时定时器的几种方式

火星云矿 | 预约S19Pro，享500抵1000！