使用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);
}

结语

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