JS定时器机制详解

前言

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。在了解定时器前，你首页也要对事件循环机制有一定的了解。可以先阅读这篇文章Js事件循环（Event Loop）机制。

基本概念

什么是定时器？

定时器是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执行状态，就会被加入主线程队列。

定时器的运行机制是什么？

定时器的运行机制，是将指定的代码移出本轮事件循环，等到下一轮事件循环，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就继续等待。

定时器解决了什么问题？

由于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是单线程的，这也决定了在异步事件（鼠标单击、定时器等）程序的处理中，在线程中没有代码的时候才会执行。即处理程序需要排队执行，且不会被其他处理程序中断。

下面通过例子来了解定时器的详细机制：

image

• 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以上。
• 可以使用定时器来分解长时间运行的任务，

结语

即使设置了时间，如果使用不当的话，定时器还是不会保证准时执行回调函数。而通过本文，相信你以前对定时器出现过类似问题有了一定的了解。希望大家熟练理解原理，大家加油！！