使用setTimeout简单模拟setInterval

913 阅读1分钟

前言

最近在复习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);
};

测试结果如下:

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

添加clearInterval

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

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

结语

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