JS提供了一些本地方法来延迟某段代码的执行。下面简单介绍一下setTiemout，setInterval，setImmediate，requestAni***tionFrame。

什么是计时器？

JS提供了一些本地方法来延迟某段代码的执行。下面简单介绍一下setTimeout:设置一个定时器，一旦定时器到期就执行一个函数或者代码段。

var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);var timeoutId = window.setTimeout(code[, delay]);

TimeoutId: TimerID IDfunc:延迟后执行的函数代码:延迟后执行的代码串。不建议使用类似eval()delay的原理:延迟时间(单位:毫秒)。默认值为0param1，param2:传递给延迟函数的参数。IE9以上支持。

SetInterval:以固定的时间间隔重复调用一个函数或代码段。

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);var intervalId = window.setInterval(code, delay);

重复操作的IntervalId: IDfunc:延迟代码中调用的函数:代码段延迟:延迟时间，无默认值。

SetImmediate:在浏览器完全完成当前运行的操作后立即执行指定的函数(仅在IE10和Node 0.10+中实现)，类似于setTimeout(func，0)

var immediateId = setImmediate(func[, param1, param2, ...]);var immediateId = setImmediate(func);

ImmediateId: timer IDfunc:回调

RequestAni***tionFrame:专门为实现高性能的帧动画而设计的API，但延迟时间无法指定，而是取决于浏览器(帧)的刷新频率。

var request id = window . requestani***tionframe(func)；

函数:回调

以上简单介绍了四个JS定时器，而本文将主要介绍两个常用的:setTimeout和setInterval。

第二，举个栗子。

基本用法// 下面代码执行之后会输出什么？var intervalId, timeoutId;timeoutId = setTimeout(function () { console.log(1);}, 300);setTimeout(function () { clearTimeout(timeoutId); console.log(2);}, 100);setTimeout('console.log("5")', 400);intervalId = setInterval(function () { console.log(4); clearInterval(intervalId);}, 200);// 分别输出: 2、4、5setInterval 和 setTimeout的区别？// 执行在面的代码块会输出什么？setTimeout(function () { console.log('timeout');}, 1000);setInterval(function () { console.log('interval')}, 1000);// 输出一次 timeout，每隔1S输出一次 interval/*--------------------------------*/// 通过setTimeout模拟setInterval 和 setInterval有啥区别么？var callback = function () { if (times++ > ***x) { clearTimeout(timeoutId); clearInterval(intervalId); } console.log('start', Date.now() - start); for (var i = 0; i < 990000000; i++) {} console.log('end', Date.now() - start);},delay = 100,times = 0,***x = 5,start = Date.now(),intervalId, timeoutId;function imitateInterval(fn, delay) { timeoutId = setTimeout(function () { fn(); if (times <= ***x) { imitateInterval(fn ,delay); } }, delay);}imitateInterval(callback, delay);intervalId = setInterval(callback, delay);

如果是setTimeout和setInterval，它们只是执行的次数不同，setTimeout一次，setIntervaln次。setTimeout模拟的setInterval和setInterval的区别在于:setTimeout只会在回调完成后调用下一个定时器，而setInterval会在到达指定时间时将一个回调事件插入事件队列，而不考虑回调函数的执行。因此，在选择计时器模式时，需要考虑setInterval的这一特性是否会对您的业务代码产生任何影响。

setTimeout(func, 0) 和 setImmediate(func)谁更快？(仅仅是好奇，才写的这段测试)console.time('immediate');console.time('timeout');setImmediate(() => { console.timeEnd('immediate');});setTimeout(() => { console.timeEnd('timeout');}, 0);

在节点中测试。JS v6.7.0发现setTimeout执行的比较早。

面试题

运行以下代码的结果是什么？

// 题目一var t = true;setTimeout(function(){ t = false;}, 1000);while(t){}alert('end');/*--------------------------------*/// 题目二for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 0);}/*--------------------------------*/// 题目三var obj = { msg: 'obj', shout: function () { alert(this.msg); }, waitAndShout: function() { setTimeout(function () { this.shout(); }, 0); }};obj.waitAndShout();

答案后面会回答。

三、JS定时器的工作原理

在解释上面问题的答案之前我们先来了解一下定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。

在解释以上问题的答案之前，我们先来了解一下定时器的工作原理。这里我们就用《JavaScript定时器如何工作》中的例子来解释定时器的工作原理，这是一个简单的示意图。

定时器

上图中，左边的数字代表以毫秒为单位的时间；左边的文字表示一个操作完成后，浏览器询问当前队列中有哪些操作在等待执行；蓝色方块表示正在执行的代码块；右侧的文本表示代码运行期间发生的异步事件。总流程图如下:

程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是简单描述一下定时器的原理，实际处理过程要比这个复杂。

四。问题的答案

好了，现在我们来看看以上面试问题的答案。第一题

Alert永远不会执行，因为JS是单线程的，只有在当前执行的任务完成后才会执行定时器的回调，而(t) {}直接进入无限循环，一直占用线程，不给回调函数执行的机会。

第二个问题

出于与上述相同的原因，代码将输出5 5 5 5 5。当i = 0时，生成一个定时器，将回调插入事件队列，等待当前队列中没有任务时立即执行。此时，for循环正在执行，因此回调被挂起。当for循环执行完成时，队列中有五个回调函数，它们都将执行console.log(i)的操作。因为目前的JS代码没有使用块级作用域，所以在for循环结束后，I的值总是5，所以代码会输出5个5。

第三个问题

这个问题涉及到这个的指向问题。setTimeout()调用的代码运行在与它所在的函数完全分离的执行环境中。这将导致这些代码中包含的关键字指向窗口(或全局)对象。window对象中没有shout方法，所以会报错。改造方案如下:

var obj = { msg: 'obj', shout: function () { alert(this.msg); }, waitAndShout: function() { var self = this; // 这里将this赋给一个变量 setTimeout(function () { self.shout(); }, 0); }};obj.waitAndShout();

动词 （verb的缩写）注意事项

setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同因为JS引擎只有一个线程，所以它将会强制异步事件排队执行如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决