使用setTimeout实现setInterval

使用setTimeout实现setInterval

前面在JS 事件循环之宏任务和微任务中讲到过，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 的不同

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

**每个 setTimeout 产生的任务会直接 push 到任务队列中；**

**而 setInterval 在每次把任务 push 到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中，如果有则不添加，没有则添加)。**

在某些情况下，setInterval 缺点是很明显的，为了解决这些弊端，可以使用 settTimeout() 代替。