＜前端＞ js定时器模拟及相关问题

内容简单，文字略多，各位耐心观看！

面试 JS 基础中可能会遇到面试官问，如何用 setTimeout 来模拟 setInterval

这边代码直接附在图中 非常简单不做过多赘述，各位小伙伴可以自行理解~

首先回顾一下，js 定时器有以下两个方法：setInterval() ：按照指定的周期来调用函数或计算表达式。方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式，仅调用一次。

然后做一个引申问题（其实很少会问）：
为什么要用 setTimeout 来模拟 setInterval 呢？ 我们总不能和面试官说，是你刚刚让我模拟的吧==

还是先给出结论👉是由于 setInterval 定时器在使用时可能会存在问题。

首先执行如下代码 setInterval ( fn , time )意思是：函数fn在每隔time毫秒之后被推入任务队列，这里注意是推入任务队列，不是直接放入任务队列。

问题1：在 setInterval 被推入任务队列时，如果在它前面有多个任务或某个任务等待时间较长这种情况时，那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。也就是，如果上一次推入的代码没有执行，那么这次的推入代码将不会被放入队列，会被跳过。

问题2：如果我们定时器里面的代码需要进行大量的计算，花费的时间就会比较长，那么我上一次的代码还没有执行完毕，那么我又推入了下一次的代码去任务队列，这个时候就会变得不准确。简单说，假如 fn 执行时间大于 time 周期的话，因为他必须执行完上一个后才会去执行下一个，假如上一个使用时间超过间隔时间，下一个函数会在上一个函数执行结束之后立即执行，所以间隔不准确。 而相对于每个 setTimeout 产生的任务会直接 push 到任务队列中~~