使用setTimeout简单模拟setInterval

前言

最近在复习 Javascript 基础时，偶然看到一个蛮有兴趣的课题 使用 setTimeout 模拟 setInterval，于是自己尝试过后，写下这篇文章记录下过程；

模拟 setInterval 函数

通常我们使用 setInterval 都会传入回调函数 callback 作为第一个参数，时间间隔 interval 作为第二个参数，并且返回一个计时器 idintervalId，如下：

const intervalId = simulateInterval(callback, interval);

考虑到 setTimeout 只会执行一次 callback，而 setInterval 会持续执行，模拟的关键就在于模拟这种 持续执行 ，所以当上一个setTimeout 完成后，需要执行下一个setTimeout，代码如下：

const intervalId = function simulateInterval(callback, interval) {
  let timerId = null;

  function fn() {callback();
    const prevTimmerId = timerId;
    timerId = setTimeout(fn, interval);
    clearTimeout(prevTimmerId);
  }

  return setTimeout(fn, interval);
};

测试结果如下：

跟预测一样，每 interval 间隔会调用 callback，输出 test 字符串，并且返回了 intervalId。
但是作为一个合格的 setInterval，还需要一个clearInterval 方法来清空定时器

添加 clearInterval

MDN 中显示 clearInterval 方法入参为 intervalId，并且从上一部分中 simulateInterval 得知其返回了 intervalId，而此 id 事实上是 timmerId，所以模拟方法就要这样实现：

function simulateClearInterval(intervalId) {clearTimeout(intervalId);
}

结语

好了，到这里文章已经结束，这篇篇幅比较短，纯粹是为了记录哈