js实现0ms延时定时器的几种方式
这两天看到一篇介绍《如何实现准时的 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++ < 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提供异步解决方案来实现的,实现本身并不复杂,如果读者有其他实现方式,欢迎留言交流。
附录
【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延时定时器的几种方式的更多相关文章
- iOS:延时执行的三种方式
延时执行的三种方式:performSelectorXXX方法.GCD中延时函数.创建定时器 第一种方式:NSObject分类当中的方法,延迟一段时间调用某一个方法 @interface NSObj ...
- js关闭当前页面(窗口)的几种方式总结(转)
js关闭当前页面(窗口)的几种方式总结 1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...
- js实现页面跳转的两种方式
CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...
- js页面跳转常用的几种方式(转)
js页面跳转常用的几种方式 转载 2010-11-25 作者: 我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...
- JS与JQ绑定事件的几种方式.
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...
- node.js 下依赖Express 实现post 4种方式提交参数
上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...
- java 定时器的三种方式
原地址:http://blog.csdn.net/haorengoodman/article/details/23281343/ /** * 普通thread * 这是最常见的,创建一个thread, ...
- js中面向对象(创建对象的几种方式)
1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 注:本文引用于 http://www.cnblogs. ...
- python开发--Python实现延时操作的几种方式
1. time.sleep 2. sched.scheduler 3. threading.Timer 4. 借助其他程序 celery redis延时队列 在日常的开发中,往往会遇到这样的需求,需要 ...
随机推荐
- Windows下Qt VS 打包程序 到他人电脑安装运行出现的问题
1.可能缺程序依赖的Qt动态库 ------> 使用Qt自带的windeployqt进入安装程序所在的文件夹内进行自动配置 将程序安装在C盘之外的盘,这样可以方便windeployqt ...
- Python_selenium PO模式下 Tesecase 的相同执行代码做成selenium_base_case公共模块及调用
作用: PO模式下 Tesecase 的相同执行代码做成selenium_base_case公共模块及调用,提高代码简洁度,实现同样效果. 框架结构: 代码简单实践: common模块下 seleni ...
- Java面试必知必会(扩展)——Java基础
float f=3.4;是否正确? 不正确 3.4是双精度,将双精度赋值给浮点型属于向下转型,会造成精度损失: 因此需要强制类型转换: 方式一:float f=(float)3.4 方式二:float ...
- 三、Nginx设置用户认证
要求:通过nginx服务端配置实现以下目标 访问web页面需要进行用户认证. 用户名为:tom,密码:123456 操作步骤, 更改配置文件 [root@client ~]# vim /usr/loc ...
- 【Android编程】Java利用Socket类编写Metasploit安卓载荷辅助模块
/作者:Kali_MG1937 CSDN博客:ALDYS4 QQ:3496925334/ 注意!此文章被作者标记到 黑历史 专栏中,这意味着本篇文章可能存在 质量低下,流水账文,笔法低质 的问题 为了 ...
- Linux面试题(史上最全、持续更新、吐血推荐)
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- 一次SQL查询优化原理分析(900W+数据,从17s到300ms)
有一张财务流水表,未分库分表,目前的数据量为9555695,分页查询使用到了limit,优化之前的查询耗时16 s 938 ms (execution: 16 s 831 ms, fetching: ...
- C#WebService的创建与发布
VS中新建项目-Web-ASP.NET Web应用程序 然后确定,选择空模版就可以了 其中CRMService.asmx是点击项目新建Web服务(asmx) 这样基本的功能就能用了,然后就是发布 点击 ...
- 10 一键部署LNMP网站平台
#!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin NGINX_V=1.19.1 P ...
- 使用CI/CD工具Github Action发布jar到Maven中央仓库
之前发布开源项目Payment Spring Boot到Maven中央仓库我都是手动执行mvn deploy,在CI/CD大行其道的今天使用这种方式有点"原始".于是我一直在寻求一 ...