JS定时器机制详解
前⾔
javascript的特性
JavaScript 提供定时执⾏代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。在了解定时器前，你⾸页也要对事件循环机制有⼀定的了解。可以先阅读这篇⽂章。
基本概念
什么是定时器？
定时器是⼀种异步任务，通常浏览器都有⼀个独⽴的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执⾏状态，就会被加⼊主线程队列。
定时器的运⾏机制是什么？
定时器的运⾏机制，是将指定的代码移出本轮事件循环，等到下⼀轮事件循环，再检查是否到了指定时间。如果到了，就执⾏对应的代码；如果不到，就继续等待。
定时器解决了什么问题？
由于JS的单线程特性，定时器提供了⼀种跳出单线程限制的⽅法，即让⼀段代码在⼀定毫秒之后，再异步执⾏。
基本⽤法
setTimeout()
setTimeout函数⽤来指定某个函数或某段代码，在多少毫秒之后执⾏。它返回⼀个整数，表⽰定时器的编号，以后可以⽤来取消这个定时器。
var timer = setTimeout(func|code, delay);
clearTimeout(timer);
setTimeout接受两个参数：
func|code： 是将要推迟执⾏的函数名或者⼀段代码。
delay： 是推迟执⾏的毫秒数。
clearTimeout()： 是取消对应的定时器的函数。
除了前两个参数，setTimeout还允许更多的参数。它们将依次传⼊推迟执⾏的函数（回调函数）。
举个栗⼦：
setTimeout(function (a,b) {
console.log(a + b);
}, 1000, 1, 1);
setInterval()
setInterval函数的⽤法与setTimeout完全⼀致，区别仅仅在于setInterval指定某个任务每隔⼀段时间就执⾏⼀次，也就是⽆限次的定时执⾏。
var timer = setInterval(function() {
console.log(2);
}, 1000)
clearInterval(timer)
上⾯代码中，每隔1000毫秒就输出⼀个2，会⽆限运⾏下去，直到关闭当前窗⼝。clearInterval函数是⽤来取消对应的定时器的。其他的
跟setTimeout基本⼀样。
深⼊机制
定时器不是JavaScript的⼀项功能，⽽是作为对象和⽅法的⼀部分，在浏览器中使⽤。也就是说，在⾮浏览器环境中使⽤
JavaScript，很可能定时器不存在来。
我们都知道JavaScript是单线程的，这也决定了在异步事件（⿏标单击、定时器等）程序的处理中，在线程中没有代码的时候才会执⾏。即处理程序需要排队执⾏，且不会被其他处理程序中断。
下⾯通过例⼦来了解定时器的详细机制：
0ms时，处启动⼀个10ms延迟的定时器，以及⼀个10ms间隔定时器。
6ms时，触发⿏标点击事件。
10ms时，定时器和第⼀个间隔定时器都过期了（由于主程序还在执⾏，所以定时器仍然在排队，等待
空闲在执⾏）。
由于定时器和点击事件都是异步事件，所以他们会进⾏事件排队，当主程序的同步事件执⾏完成（即在18ms之后），线程空闲时才执⾏。
18ms时，主线程执⾏完毕，开始执⾏队列⾥⾯的事件，队列⾥⾯现在有⿏标单击事件、setTimeout定时器和setInterval定时器。
20ms时，由于队列⾥⾯有setInterval定时器，所以第⼆个到期的间隔定时器就会作废处理。
28ms时，单击事件执⾏完成，并且在10ms就应该执⾏的setTimeout定时器，现在才开始执⾏。
30ms时，第三个setInterval定时器到期，因队列中有间隔定时器，所以第三个也作废。
34ms时，setTimeout定时器执⾏完成，开始执⾏setInterval，但由于第⼀个间隔定时器在42ms时结束，所以40ms时，到期的第⼆个间隔定时器，⼜要进⾏排队等待。
47ms时，由于第⼆个setInterval可以在第三个间隔定时器50ms到期时执⾏完，所以不需要排队直接执⾏。
根据上⾯的流程进⾏⼩结：
事件排队：同时发⽣了这么多事情，由于js的单线程特性，当线程正在执⾏状态，有异步事件触发时，它就会排队，并且在线程空闲时才进⾏执⾏。并且依照先进先出的顺序执⾏(先排队的先执⾏)。
setInterval调⽤被废弃：在线程被占⽤的情况下，并且队列中已经有setInterval在排队，则下⼀个到期的setInterval会被废弃。
定时器⽆法保证准时执⾏回调函数：在主线程还没有结束，即使定时器时间到期仍然不会执⾏，必须等到主程序同步代码全部执⾏完。
setTimeout和setInterval的区别：其最主要的区别是功能上的区别，setTimeout只延迟执⾏⼀次，setInterval按时间周期性的执⾏。
其他相关知识：
定时器不能⾮常细粒化的控制执⾏的时间，建议在15ms以上。
可以使⽤定时器来分解长时间运⾏的任务，
结语
即使设置了时间，如果使⽤不当的话，定时器还是不会保证准时执⾏回调函数。⽽通过本⽂，相信你以前对定时器出现过类似问题有了⼀定的了解。希望⼤家熟练理解原理，⼤家加油！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。