基本概念

什么是定时器?

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

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

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

定时器解决了什么问题?

由于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按时间周期性的执行。

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看JavaScript视频教程学习哦!