关闭

你可能不知道的setInterval的坑

时间: 2018-09-17阅读: 1041标签: 定时器

之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么。今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑。


坑的地方

1、setInterval会无视代码的错误。就算遇到了错误,它还是会一直循环下去,不会停止。这就导致了可能你代码里存在着一些问题(比如你的代码可能有个一定概率下会发生的错误,而你使用setinterval来循环调用它,由于setinterval不会因为报错停止,所以这个问题可能被隐藏),可是却很难发现。

let count = 1;
setInterval(function () {
    count++;
    console.log(count);
    if (count % 3 === 0) throw new Error('setInterval报错');
}, 1000)


2、setInterval会无视任何情况下定时执行。而在有些场景下,我们是不希望如此的。

比如说,我们要实现一个功能,每隔一段时间要向服务器发送请求来查看是否有新数据。此时,若当时用户的网络状态很糟糕,客户端收到请求响应的时间大于interval循环的时间。而setInterval会无视任何情况下定时执行,这就会导致了用户的客户端里充斥着ajax请求。
此时正确的做法应该是改用setTimeout,当用户发出去的请求得到响应或者超时后,再使用setTimeout递归发送下一个请求。这样就不会有setInterval的坑了。


3、setInterval不能确保每次调用都能执行。我们可以先看一个代码

const startDate = new Date();
let endData;
// 第一个调用会被略过
setInterval(() => {
  console.log('start');
  console.log(startDate.getTime());
  console.log(endDate.getTime());
  console.log('end');
}, 1000);
while (startDate.getTime() + 2 * 1000 > (new Date()).getTime()) {
}
endDate = new Date();

我们可以看到,第一次执行的setInterval函数输出的startDate和endDate差距在2s以上。而我们的setInterval写的是每间隔1s执行一次。因此,我们可以看出,第一次的setInterval函数调用被略过了。

这说明了:如果说你的代码执行时间会比较久的话,就会导致setInterval中的一部分函数调用被略过。因此你的程序如果依赖于setInterval的精确执行的话,那么你就要小心这一点了。

当然,其实setTimeout也有这个问题。浏览器的定时器都不是精确执行的。就算你调用setTimeout(fn, 0),它也不能确保马上执行。


解决方案

其实解决方案也很简单,就是使用setTimeout,然后再setTimeout里递归调用。

比如说第一个和第二个坑就可以这样写:

function fn () {
  setTimeout(() => {
    // 程序主逻辑代码
    // 循环递归调用
    fn();
  }, 1000);
}
fn();

可是使用setTimeout后,我们又可能会遇到一个问题,就是计时器的下次触发时间是在当前的触发时间上开始计算的。这对于第二个坑这种情况是合理的,可是有时候我们又希望它能“匀速”地被触发。也就是说,希望计时器的触发时间尽可能在计时器注册时间+周期*delay附近。这个时候,我们就可以用预期下次发生的时间减去当前的时间来得到一个精确的delayTime。

我写了一个简单的函数来实现这一点:一开始调用该函数的时候,会记录当前的计时器注册时间,以及一个用来统计计算器调用次数的变量。之后在每次调用newFn的时候,都会使用预期下次发生的时间减去当前的时间来得到一个精确的delayTime。这样至少可以保证在一些情况下,计时器可以稍微精确的执行。

function accurateTimers (fn, expectDelayTime) {
  let init = false;
  let registDate = new Date(); // 计时器注册时间
  let count = 0;  // 计时器调用次数
  function newFn() {
    let delayTime;
    count++;
    if (!init) {
      init = true;
      delayTime = expectDelayTime;
    } else {
      delayTime = expectDelayTime * count + registDate.getTime() - new Date().getTime();
    }
    console.log(delayTime);
    setTimeout(() => {
      fn();
      newFn();
    }, delayTime);
  }
  newFn();
}
accurateTimers(function () {
  let startDate = new Date();
  // 延迟500ms
  while (startDate.getTime() + 500 > (new Date()).getTime()) {
  }
}, 1000);


结论

以上,就是本次文章的内容。这篇文章只是做一个简单的记录,希望能帮大家了解到setInterval的坑的地方,在实际编程中可以少走点弯路。

来源:https://www.cnblogs.com/chenjg/archive/2018/09/16/9657574.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1082

关闭

node-schedule 全局内关闭定时器

用Cron表达式完成定时器,全局内关闭定时器需要获取到定时器的引用,scheduleJob存在第四个参数,然而readme中没有提及,可知API

在vue组件中设置定时器和清除定时器

由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器。 但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况

如何使JavaScript休眠或等待

JavaScript不具有 sleep() 函数,该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待,该怎么做呢?假设您想将三则消息记录到Javascript控制台,每条消息之间要延迟一秒钟

JS中的定时器-案例解析

倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。

18 行 JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备。不管你是否有一次约会,销售、促销、或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件。虽然有许多很棒的时钟插件

Js中setTimeout()、setInterval()、链式setTimeout()

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行

JavaScript 开发者应该知道的 setTimeout 秘密

计时器setTimeout是我们经常会用到的,它用于在指定的毫秒数后调用函数或计算表达式。语法:setTimeout(code, millisec, args);注意:如果code为字符串,相当于执行eval()方法来执行code。

js 随机点名

主要是利用定时器,点击开始IDE时候不断的执行,并同时生成随机数,利用数组的下标完成展示。主要用到的知识点:setInterval,Math.random()

js中setTimeout和setInterval的深入理解:它们之间的区别,原理,“异步“等

这篇文章将带你深入理解js中定时器是如何工作的,setTimeout和setInterval的原理是什么?

JS setTimeout()基本用法

在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 JS 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!