2021-11-12 每天进步一点点： 你真的搞懂模拟setInterval定时器了吗？

setInterval特点

• 无视错误代码。当定时器里执行的代码报错时，定时器依然会重复输出报错，不会停止执行。

举个例子：

setInterval(function() {
	console.log(aaa)
}, 1000)

打开控制台，看下输出结果：

• 单次执行时间不固定

简单说下定时器的机制。

定时器的延迟时间，是表示到了这个时间，就把任务推送到任务队列里，但是具体执行时间要看任务在主线程里是否能排到。

来个简单的测试：

var start = new Date().getTime();
var n = 0;
setInterval(function() {
  n++;
  var now = new Date().getTime();
  console.log(now - start - n * 1000);
}, 1000)

看下打印结果：

• 无视延迟，当网络不佳或网络延迟时，定时器依然会把任务推到队列里，定时器并不关心任务的执行清空。

写一个定时器，然后切换到另一个页面几秒钟，再切换回来，你可以发现 ，这时的定时器执行，已经凌乱不堪了。。。

• 定时器不需要重启。这也是和setTimeout的区别。 从上面的例子可以看出来。
• 定时器有最低时间间隔，即使你不写延迟时间。

举个例子：

var start = new Date().getTime();
setInterval(function() {
	var now = new Date().getTime();
	console.log(now - start);
})

两次执行之间，仍然会间隔一定的时间，大约是几ms 。

用setTimeout实现setInterval

这个比较简单，随便写个递归就能让任务跑起来：

function interval(fn, delay) {
	function inner() {
		fn();
		setTimeout(inner, delay);
	}
	setTimeout(inner, delay);
}

或者来一个更简单的写法：

function interval(fn, delay) {
  setTimeout(function() {
    fn();
    interval(fn, delay);
  }, delay)
}

写个demo跑一下试试：

interval(function(){
	console.log(1);
}, 1000)

看下打印结果：

跑起来了。

但是，怎么让他停下来呢？

这就要从定时器的timerId机制上说一说。

定时器的timerId机制

前端小伙伴肯定熟悉这样一段代码：

var timer = setTimeout(function() {
  console.log(111);
}， 1000)

但是有没有想过，这个timer到底是啥？

那好，我们先举几个例子，输出一下：

var timer = setTimeout(function() {
  console.log(111);
}， 1000)
console.log(timer); // 1

var timer = setTimeout(function() {
      console.log(111);
    }, 1000)
    console.log(timer); // 1

    timer = setTimeout(function() {
      console.log(111);
    }, 1000)
    console.log(timer); // 2

    timer = setTimeout(function() {
      console.log(111);
    }, 1000)
    console.log(timer); // 3

通过上面两个例子，很容易看出来，

timer就是一个任务序列号，

当定时器首次把任务函数推到队列时，timer就是1 ，

第二次把任务函数推到队列时， timer就是2

依此类推。

既然timer是一个序列数字， 那么，

当我们用clearTimeout来清除一个数字时，

就相当于清除了这个数字对应的定时器序列。

再来看下刚才实现的那个模拟定时器：

改造成这样：

试一下清除数字4：

var timer = null;

function interval(fn, delay) {
  function inner() {
    timer = setTimeout(inner, delay);
    console.log('timer: ', timer, typeof timer);
    clearTimeout(4);
  }
  timer = setTimeout(inner, delay);
}

interval(function() {
  console.log(1);
}, 1000)

看下打印结果：

果然，当timer 是4， 就不会往下执行了，时间被我们停止了！

既然明白了这一点，

就可以轻而易举的给定时器加次数限制了。

给模拟定时器加次数限制

// n 是要求执行的次数
function interval(fn, delay, n) {
  function inner() {
    fn();
    setTimeout(inner, delay);
    clearTimeout(n + 1);
  }
  setTimeout(inner, delay);
}

写个demo测试一下：

interval(function() {
  console.log(1);
}, 1000, 4)

看一下打印结果：

任务执行了4次。 符合预期。

然而， 新的问题又蹦出来了。

前面都说了，要模拟一个clearInterval，

但是， 测试一下，

clearTimeout(timer);

搞了半天， 任务倒是跑起来了，但是没办法随时停下来啊，

让定时器停下来

想停下来，就必须有一个可以被清除的timer 。

所以， 我们需要先在外部定义一个空的timer，

然后让定时器把实时的timer返回到外部 。

然后在外部清除定时器。

也就是下面这样：

var timer = null;
function interval(fn, delay) {
  function inner() {
    fn();
    timer = setTimeout(inner, delay);
  }
  timer = setTimeout(inner, delay);
  return timer;
}

写个demo测试一下：

interval(function() {
  console.log(111);
}, 1000)

setTimeout(function () {
  clearTimeout(timer);
}, 4000)

查看下打印结果：

定时器按照我们的要求停下来了。

模拟定时器再也不能无视错误代码了

既然setInterval有很多缺点，

那要看下， 模拟定时器，到底有没有解决这个问题，

写个demo测试一下吧：

var timer = null;
function interval(fn, delay) {
  function inner() {
    fn();
    timer = setTimeout(inner, delay);
  }
  timer = setTimeout(inner, delay);
  return timer;
}

interval(function() {
  console.log(aaa); // 这里改成一个错误的输出进行测试
}, 1000)

setTimeout(function () {
  clearTimeout(timer);
}, 4000)

查看打印结果：

针不戳~ 遇到错误代码， 不再无脑重复执行了。

---

定时器还有很多可以挖掘的点， 也有很多的痛点，在开发中，定时器会有很多很多坑， 这也是用模拟定时器的原因之一。