setInterval 与 setTimeout 定时器问题

setInterval 与 setTimeout 语法:

setInterval (function(){}, time);  // time 即时间的单位为毫秒
setTimeout (function(){}, time);  // time 即时间的单位为毫秒

上面的定时器其实还可以接受两个参数，就是给定时器的函数传参

setTimeout(function(a,b){
    console.log(a+b);
},1000,5,3);

1. setTimeout 定时器：它只会执行一次里面的函数，就停止了计时

setTimeout 函数返回一个表示计数器编号的整数值，将该整数传入 clearTimeout 函数，取消对应的定时器

setTimeout(function(){
    console.log('a');
},100);

2. 关于 setTimeout (func,0)

setTimeout(function(){
    console.log('hello');
},0);
console.log('world');
// 结果为： world hello

这里就有个关于异步的问题。
在说异步和同步的同时，这里就要说说 JavaScript 的 [单线程]:

所谓的单线程，是指 JS 引擎中负责解释和执行 JavaScript 的代码线程只有一个（也称主线程），也就意味着所有任务都需要排队。而一次只能执行一项任务，只有上一项任务执行完才能执行下一项任务。所以如果说，上一项任务执行时间很长，就会阻碍其他任务的执行。这样通常效率会比较低。

这也就引发了同步和异步问题：

同步模式：就指上面的单线程了，一次只能执行一项任务，函数调用后需等待函数执行结束，然后再返回执行结果，才进行下一个任务，如果上一个任务执行时间长，就造成[线程阻塞]。

异步模式：与同步相反，它可以执行多项任务，所以就会有子线程来执行（但是伪线程）。函数调用后不会立即返回执行结果，如果任务需要等待，它会执行下一项任务。等到上一项任务结果返回再继续回调。

了解了同步和异步，再回来看看 setTimeout(fn,0) 的问题。这里将定时器的执行时间设置为0，并不表示它就会立即执行，只是把函数放入异步队列。浏览器先执行完同步队列里的任务，才会去执行异步队列中的任务。

注意：setTimeout(fn, t)，fn的执行时间是大于或等于t的；（因为异步的问题）
注释：setTimeout(func,0) 可以调整事件的发生顺序。

3. setInterval 定时器：无限次的定时执行

它会一直不断的间隔的执行里面的函数，你没有告诉它停就不会停，所以你要用 clearInterval() 来停止 setInterval 计时器。

setInterval(function(){
    console.log('a');
},100)

4. setInterval() 的问题

使用 setInterval() 的问题在于，定时器代码可能在代码再次被添加到队列之前还没有完成执行，结果导致定时器代码连续运行好几次，而之间没有任何停顿。而 JavaScript 引擎对这个问题的解决是：当使用 setInterval() 时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。
但是，这样会导致两个问题：

1.某些间隔被跳过
2.多个定时器的代码执行之间的间隔可能比预期的小

5. 迭代 setTimeout

为了避免 setInterval() 定时器的问题，可以使用链式 setTimeout() 调用

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

这个模式链式调用了 setTimeout() ，每次函数执行的时候都会创建一个新的定时器。第二个 setTimeout() 调用当前执行的函数，并为其设置另外一个定时器。这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。

第一种写法：

funciton xxx(){
    // 函数代码，此处执行时间约20毫秒
    setTimeout(xxx,10)
}

第二种写法

funciton xxx(){
    // 函数代码，此处执行时间约20毫秒
}
setInterval(xxx,10)

第一种写法中，只有执行完20ms的代码后，再等10ms才会开始下一个循环
第二种写法中，无论有没有执行完20ms的代码，10ms后都会开始下一个循环

补充：

1.所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）
2.主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件
3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.主线程不断重复上面的第三步

事件环（eventloop）
JS 该如何处理异步的回调方法？于是 eventloop 出现了，通过一个无限的循环，寻找符合条件的函数，执行之。但是 JS 很忙的，如果一直不断的有 task 任务，那么 JS 永远无法进入下一个循环。JS 说我好累，我不干活了，罢工了。

stack 和 queue
于是出现了stack 和 queue，stack 是 JS 工作的堆，一直不断地完成工作，然后将 task 推出 stack 中。然后 queue（队列）就是下一轮需要执行的 task 们，所有未执行而将执行的 task 都将推入这个队列之中。等待当前 stack 清空执行完毕，然后 eventloop 循环至 queue，再将 queue 中的 task 一个个推到 stack 中。

正因为 eventloop 循环的时间按照 stack 的情况而定。就像公交车一样，一站一站之间的时间虽然可以预估，但是难免有意外发生，比如堵车，比如乘客太多导致上车时间过长，比如不小心每个路口都吃到了红灯等等意外情况，都会导致公交陈晚点。eventloop 的 stack 就是一个不定因素，也许 stack 内的 task 都完成后远远超过了 queue 中的 task 推入的时间，导致每次的执行时间都有偏差。

参考转载原文：https://blog.csdn.net/weixin_44441419/article/details/88219450，https://cloud.tencent.com/developer/article/1410199