罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 121|回复: 0

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

[复制链接]

557

主题

625

帖子

733

积分

社区达人

积分
733
发表于 2021-8-7 13:18:11 | 显示全部楼层 |阅读模式
目录


  • queueMicrotask
  • async/await
  • MessageChannel
  • 最后
  • 附录
这两天看到一篇介绍《如何实现准时的 setTimeout?》的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录【1】,看完之后,引起了我对setTimeout这个函数的探究兴趣,因此在MDN上重新查阅了相关文档,其中提到【最小延时 >=4ms】的一点,因此使用setTimeout不能实现0ms延时的定时器,如果要实现的话,提供了一个参考链接【2】,作者的实现思路是通过postMessage来模拟,绕过setTimeout的限制,从而实现0ms延时的定时器,说简单来讲就是起了一个宏任务去执行回调,先具体看下是怎么实现的:
  1. (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版本的执行时间进行对比,代码比较简单:
  1. (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可以添加一个微任务,使用比较简单,直接传递一个回调函数即可,具体实现如下:
  1. (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对于前端开发人员来说已经是必不可少的了,这里我们也可以用来实现:
  1. (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之间的通信。
  1. (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提供异步解决方案来实现的,实现本身并不复杂。


附录


​​【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 延时定时器 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:http://www.jb51.net/article/218206.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

浏览排行

(34042)2019-11-5 公共云钱包资金盘骗局揭秘: 网络传销+原始股骗局合体!

(18647)2019-12-20 12月17日 邓智天法院直播庭审疑问全解答!

(18149)2019-12-1 环保币GEC资金盘骗局最新消息: 即将崩盘!

(13144)2018-12-24 罗田县人民法院公布【第五批失信被执行人名单】 ...

(12836)2019-11-3 曝光!PTFX已经崩盘跑路,投资者血流成河!

(8651)2019-12-15 满足你对女同事的幻想 风骚秘书阿朱销魂眼神勾魂摄魄

(8277)2018-12-24 【失信曝光】罗田县人民法院第二期失信被执行人公告

(8198)2019-12-11 公安定性了, 趣码是非法传销! 趣码怎么退回365元?

(8097)2019-12-17 淘小铺传销还是忽悠? 搞社交电商, 淘小铺也要凉!!

(7979)2018-10-17 罗田县人民政府“12345”市民服务热线服务指南

最新发表

[升平网络工作室]2021-9-24 [2021-09-24]罗田天气预报

[升平网络工作室]2021-9-23 9月23日罗田新闻

[升平网络工作室]2021-9-23 徐寿辉大道改造提升工程如火如荼有序推进

[升平网络工作室]2021-9-23 全县第十六次党代会代表选举工作会召开

[升平网络工作室]2021-9-23 罗田县县乡两级人大代表换届选举拉开序幕

[升平网络工作室]2021-9-23 周黎参加县政府综合口第一选区县人大代表换届选举

[升平网络工作室]2021-9-23 郝爱芳以普通选民身份参加党群口选区选举投票活动

[升平网络工作室]2021-9-23 骆驼坳镇选举产生县乡两级人大代表

[升平网络工作室]2021-9-23 公交司机拾金不昧,传递社会正能量

[升平网络工作室]2021-9-23 《清清的义水河》在人民会场公演

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2021-9-24 08:42 , Processed in 0.097114 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表