为什么要用 setTimeout 模拟 setInterval ?

Souleigh ✨
• 阅读 2377

在JS 事件循环之宏任务和微任务中讲到过,setInterval 是一个宏任务。

用多了你就会发现它并不是准确无误,极端情况下还会出现一些令人费解的问题。

下面我们一一罗列..

推入任务队列后的时间不准确

定时器代码:

setInterval(fn(), N);  

上面这句代码的意思其实是fn()将会在 N 秒之后被推入任务队列

所以,在 setInterval 被推入任务队列时,如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等,那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。

比如:

let startTime = new Date().getTime();  
let count = 0;  
//耗时任务  
setInterval(function() {  
  let i = 0;  
  while (i++ < 1000000000);  
}, 0);  
setInterval(function() {  
  count++;  
  console.log(  
    "与原设定的间隔时差了:",  
    new Date().getTime() - (startTime + count * 1000),  
    "毫秒"  
  );  
}, 1000);  
// 输出:  
// 与原设定的间隔时差了:699 毫秒  
// 与原设定的间隔时差了:771 毫秒  
// 与原设定的间隔时差了:887 毫秒  
// 与原设定的间隔时差了:981 毫秒  
// 与原设定的间隔时差了:1142 毫秒  
// 与原设定的间隔时差了:1822 毫秒  
// 与原设定的间隔时差了:1891 毫秒  
// 与原设定的间隔时差了:2001 毫秒  
// 与原设定的间隔时差了:2748 毫秒  
// ...  

可以看出来,相差的时间是越来越大的,越来越不准确。

函数操作耗时过长导致的不准确

考虑极端情况,假如定时器里面的代码需要进行大量的计算(耗费时间较长),或者是 DOM 操作。这样一来,花的时间就比较长,有可能前一次代码还没有执行完,后一次代码就被添加到队列了。也会到时定时器变得不准确,甚至出现同一时间执行两次的情况。

最常见的出现的就是,当我们需要使用 ajax 轮询服务器是否有新数据时,必定会有一些人会使用 setInterval ,然而无论网络状况如何,它都会去一遍又一遍的发送请求,最后的间隔时间可能和原定的时间有很大的出入。

// 做一个网络轮询,每一秒查询一次数据。  
let startTime = new Date().getTime();  
let count = 0;  

setInterval(() => {  
    let i = 0;  
    while (i++ < 10000000); // 假设的网络延迟  
    count++;  
    console.log(  
        "与原设定的间隔时差了:",  
        new Date().getTime() - (startTime + count * 1000),  
        "毫秒"  
    );  
}, 1000)  
输出:  
// 与原设定的间隔时差了:567 毫秒  
// 与原设定的间隔时差了:552 毫秒  
// 与原设定的间隔时差了:563 毫秒  
// 与原设定的间隔时差了:554 毫秒(2次)  
// 与原设定的间隔时差了:564 毫秒  
// 与原设定的间隔时差了:602 毫秒  
// 与原设定的间隔时差了:573 毫秒  
// 与原设定的间隔时差了:633 毫秒  

setInterval 缺点 与 setTimeout 的不同

再次强调,定时器指定的时间间隔,表示的是何时将定时器的代码添加到消息队列,而不是何时执行代码。所以真正何时执行代码的时间是不能保证的,取决于何时被主线程的事件循环取到,并执行。

setInterval(function, N)  
//即:每隔N秒把function事件推到消息队列中  

为什么要用 setTimeout 模拟 setInterval ?

setinterval-1.png

上图可见,setInterval 每隔 100ms 往队列中添加一个事件;100ms 后,添加 T1 定时器代码至队列中,主线程中还有任务在执行,所以等待,some event 执行结束后执行 T1 定时器代码;又过了 100msT2 定时器被添加到队列中,主线程还在执行 T1 代码,所以等待;又过了 100ms ,理论上又要往队列里推一个定时器代码,但由于此时 T2 还在队列中,所以T3 不会被添加(T3 被跳过),结果就是此时被跳过;这里我们可以看到,T1 定时器执行结束后马上执行了 T2 代码,所以并没有达到定时器的效果。

综上所述,setInterval 有两个缺点:

  • 使用 setInterval 时,某些间隔会被跳过;

  • 可能多个定时器会连续执行;

可以这么理解:每个 setTimeout 产生的任务会直接 push 到任务队列中;而 setInterval 在每次把任务 push 到任务队列前,都要进行一下判断(看上次的任务是否仍在队列中,如果有则不添加,没有则添加)。

因而我们一般用 setTimeout 模拟 setInterval ,来规避掉上面的缺点。

来看一个经典的例子来说明他们的不同:

for (var i = 0; i < 5; i++) {  
  setTimeout(function() {  
    console.log(i);  
  }, 1000);  
}  

做过的朋友都知道:是一次输出了 55 ; 那么问题来了:是每隔 1 秒输出一个 5 ?还是一秒后立即输出 55 ?答案是:一秒后立即输出 55因为 for 循环了五次,所以 setTimeout5 次添加到时间循环中,等待一秒后全部执行。

为什么是一秒后输出了 55 呢?简单来说,因为 for 是主线程代码,先执行完了,才轮到执行 setTimeout

当然为什么输出不是 15 ,这个涉及到作用域的问题了,这里就不解释了。

setTimeout 模拟 setInterval

综上所述,在某些情况下,setInterval 缺点是很明显的,为了解决这些弊端,可以使用 setTimeout() 代替。

  • 在前一个定时器执行完前,不会向队列插入新的定时器(解决缺点一)

  • 保证定时器间隔(解决缺点二)

具体实现如下:

1.写一个 interval 方法

let timer = null  
interval(func, wait){  
    let interv = function(){  
        func.call(null);  
        timer=setTimeout(interv, wait);  
    };  
    timer= setTimeout(interv, wait);  
 },  

2.和 setInterval() 一样使用它

interval(function() {}, 20);  

3.终止定时器

if (timer) {  
  window.clearSetTimeout(timer);  
  timer = null;  
}  

参考

  • 为什么要用 setTimeout 模拟 setInterval ?

  • 用 settTimeout()代替 setInterval()

来自:SegmentFault,作者:九旬

链接:https://segmentfault.com/a/1190000038829248

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
Souleigh ✨ Souleigh ✨
1年前
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask):setTimeOut、setInterval、setImmediate、I/O、各种callback、UI渲染、messageCh
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Karen110 Karen110
1年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_34035044 helloworld_34035044
5个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为