你所不知道的setTimeout和setInterval(保姆级)

作为两个平常使用最多的定时器，我们有必要从多维度对他们进行深度解析，从而让代码运行永远可控。

基本概念

• setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(函数或计算表达式, 毫秒数);//返回number类型定时器id

• setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval(函数或计算表达式, 毫秒数);//返回number类型定时器id

应用场景

• 用于异步处理事件，例如为了得到上下文同步执行完毕后得到的最新的值，可以用定时器。
• 定时触发事件，例如可以用来实时定位、闹钟提醒等功能，在移动端运用很广泛。
• 用于防抖节流，避免重复触发执行代码或降低触发执行代码频率，增加页面性能。

运行机制

运行时间

• setTimeout。setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。这就意味着，setTimeout的下一次运行必须得等上次运行代码执行结束、当前没有更高优先级的事件（当前执行栈队列、微任务队列都为空）以及到了自己设定的时间。例如

zhangjie();
 
function zhangjie()
 
{
 
    alert("The time is: " + new Date().getTime());
 
    setTimeout("zhangjie()", 5000);
    //setTimeout方法不会每隔5秒钟就执行一次zhangjie函数，
    //它是在每次调用setTimeout后再过5秒钟再去执行zhangjie函数。
    //这意味着如果zhangjie函数的主体部分需要2秒钟执行完，
    //那么整个函数则要每7秒钟才执行一次。
}

• setInterval。setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。

有充分的理由要避免setInterval-尤其是在某些情况下，整个setInterval事件负荷可以彼此紧接着立即到达而没有任何延迟。另一个原因是，如果要停止循环，则必须显式调用clearInterval，这意味着必须记住原始setInterval调用返回的句柄。

运行优先级

我们知道浏览器的事件队列处理机制，从优先级由大到小大致分为执行栈任务队列、微任务队列和宏任务队列，必须是当优先级高的任务队列执行完之后再轮到低优先级的事件。setTimeout和setInterval属于宏任务队列，执行优先级最低，两个setTimeout或setInterval一般是谁设置时间短谁先执行，但是所设置时间差不多时，很难预测，因为受各种事件执行时间的影响不能准确知道。

后续处理

setTimeout和setInterval都是全局性的属性，当不需要时要及时清除，否则会影响页面性能和增加不可预测性，尤其是setInterval。当我们在定时器运行里面代码的时候清除该定时器，很抱歉，这时里面正在执行的代码仍将执行完毕。

//setTimeout
let timeId=setTimeout(......);//创建
clearTimeout(timeId);//不用时删除
//setInterval
let timeId=setInterval(......);//创建
clearInterval(timeId);//不用时删除

意外情况

因为浏览器的优化原因，setTimeout()和setInterval()，在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。比如切换其他标签页、最小化窗口等。
这个时候如果要让定时器能够正常的运行，可以使用 webWorker多线程，webWorker会在这个窗口存活时除非手动关闭否则都会正常异步运行，例如考试系统使用场景。需要注意的是，如果浏览器窗口被销毁或被杀死、移出内存时，所有的一切将不起作用。

结尾

当你认真的研读这篇文章后，作为两个平常使用最多的定时器你已了然于胸，对自己代码的运行逻辑更加的放心可靠！给自己加个鸡腿。假如你还没弄明白，那可能你忘记了点赞~~