计时器问题排查及解决方案

最新推荐文章于 2024-10-05 01:22:45 发布

EsquireY

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量207

点赞数

分类专栏： JS/TS 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/esquirey/article/details/131112601

版权

JS/TS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章讨论了在JavaScript中使用setInterval进行定时任务时出现的计时误差问题，分析了误差产生的原因——由于JavaScript的单线程特性导致的任务执行延迟。为了解决这个问题，提出了一个解决方案，即通过计算每次执行的误差并动态调整下次执行的间隔时间来减少累计误差。

摘要由CSDN通过智能技术生成

背景

项目中要每隔一分钟同步数据，需要用到计时器，定时请求数据。我用的是 setInterval ，通常我们用就是把需要计时的东西放到方法体内，设置即使时间就OK了。但是随着执行的次数增多，误差就会越来越大。

常规写法代码展示

      let startTime = new Date().getTime(),
        count = 0,
        interval = 1000; 
      setInterval(() => {
        count++;
        /*
        ... // 要执行的代码
        */
        console.log(
          new Date().getTime() - (startTime + count * interval) + "ms"
        );
      }, interval);

在这里插入图片描述

分析原因

setInterval实现的计时器，根据打印的误差时间可知道，刚开始几毫秒的误差还能接受，但是你在页面操作或者有一些阻塞，这个延迟会越来越大。
究其原因，setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。setInterval源于js的单线程，运行的时间会调取计算机资源，如果计算机现在在运行其他的，单线程的就得等着。这一次执行花费时间长一点，下一次执行时间就会快一点。

解决方案

获取每次的误差，根据差值动态调整执行回调的间隔时间

        let startTime = new Date().getTime(),
          count = 0,
          interval = 1000,
          offset = 0; //误差时间
        let nextTime = interval - offset; //原本间隔时间 - 误差时间
        this.selectMsgBoxData();
        setInterval(() => {
          count++;
          offset = new Date().getTime() - (startTime + count * interval);
          nextTime = interval - offset;
        /*
        ... // 要执行的代码
        */
          console.log(
            interval + "间隔时间",
            new Date().getTime() - (startTime + count * interval) + "ms"
          );
        }, nextTime);

···
在这里插入图片描述