JS进阶 -- setTimeout 模拟 setInterva

概述

setTimeout 和 setInterval 是 JavaScript 中常用的定时器。

• setTimeout -> 定时器到期后执行一个函数或指定的一段代码
• setInterval -> 重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟

setTimeout 模拟 setInterval

setTimeout 模拟 setInterval demo

  let count = 0;
  let timerId = null;
  timerId = setTimeout(function run() {
    console.log("run -> ", count);
    if (count >= 3) {
      clearTimeout(timerId);
      return;
    }
    count += 1;
    timerId = setTimeout(run, 1000);
  }, 1000);

可以看到控制台的 count 一直在增长。同样的使用 setInterval也可以实现上述效果

  let count = 0;
  let timerId = null;
  timerId = setInterval(function run() {
    console.log("run -> ", count);
    if (count >= 3) {
      clearInterval(timerId);
      return;
    }
    count += 1;
  }, 1000);

为什么使用 setTimeout 模拟 setInterval

setInterval 缺点：

1. 某些间隔会被跳过（丢帧现象）
2. 定时器之间的间隔会比预期小

让我们更新一下我们 setInterval 的 demo

  let count = 0;
  let doSomeThing = () => {
    // 这里会进行很多计算量很大的操作，将会耗时 1.6s
  };
  let run = () => {
    console.log("run -> ", count);
    count += 1;
    doSomeThing();
  };
  let timerId = setInterval(run, 1000);

之后我们逐步分析一下接下来的5秒会发生什么事情，我们假设 setInterval 在 0s 时触发

• 0 - 1s

  • 0s 时 setInterval 触发

• 1s - 2s

  • 1s 时 run （此处的 run 我们取名 run1）被加入队列并执行

• 2s - 3s

  • 2s 时 run （此处的 run 我们取名 run2）被加入队列，但是此时 run1 别没有执行结束，所以 run2 不能立即执行。
  • 2.6s 时 run1 执行结束， run2 开始执行

• 3s - 4s

  • 3s 时 run （此处的 run 我们取名 run3）被加入队列，但是此时 run2 别没有执行结束，所以 run3 不能立即执行。

• 4s - 5s

  • 4s 时 run (此处的 run 我们取名 run4）应该被加入队列，但是由于目前队列中有 run3，所以 run4 被忽略

    注意：当使用 setInterval() 时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。run3 是该定时器的代码实例，所以 run4 不会被加入到队列中，从而导致丢帧现象

  • 4.2s 时 run2 执行结束，run3 开始执行

事件图示

使用 setTimeout

demo

  let count = 0;
  let doSomeThing = () => {
    // 这里会进行很多计算量很大的操作，将会耗时 1.6s
  };
  let timer = null;
  let run = () => {
    console.log("run -> ", count);
    count += 1;
    doSomeThing();
    timer = setTimeout(run, 1000);
  };
  timerId = setTimeout(run, 1000);

同样的，我们也来分析一下接下来的5秒会发生什么，我们假设 setTimeout 在 0s 时触发

• 0 - 1s

  • 0s 时 setTimeout 触发

• 1s - 2s

  • 1s 时 run （此处的 run 我们取名 run1）被加入队列并执行

• 2s - 3s

  • 2.6s 时 run1 执行结束

• 3s - 4s

  • 3.6s 时 run （此处的 run 我们取名 run2）被加入队列并执行

• 4s - 5s

• 5s - 6s

  • 5.2s 时 run2 执行结束

事件图示

总结

由于 setInterval 有如下缺点

1. 某些间隔会被跳过（丢帧现象）
2. 定时器之间的间隔会比预期小

所以使用 setTimeout 代替 setInterval 吧！