共计 4383 个字符，预计需要花费 11 分钟才能阅读完成。
JS 提供了一些原生办法来实现延时去执行某一段代码，上面来简略介绍一下 setTiemout、setInterval、setImmediate、requestAnimationFrame。
一、什么是定时器
JS 提供了一些原生办法来实现延时去执行某一段代码，上面来简略介绍一下 setTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段
var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
- timeoutId: 定时器 ID
- func: 提早后执行的函数
- code: 提早后执行的代码字符串，不举荐应用原理相似 eval()
- delay: 提早的工夫（单位：毫秒），默认值为 0
- param1,param2: 向提早函数传递而外的参数，IE9 以上反对
setInterval: 以固定的工夫距离反复调用一个函数或者代码段
var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
- intervalId: 反复操作的 ID
- func: 提早调用的函数
- code: 代码段
- delay: 延迟时间，没有默认值
setImmediate: 在浏览器齐全完结以后运行的操作之后立刻执行指定的函数 (仅 IE10 和 Node 0.10+ 中有实现)，相似 setTimeout(func, 0)
var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);
- immediateId: 定时器 ID
- func: 回调
requestAnimationFrame: 专门为实现高性能的帧动画而设计的 API，然而不能指定延迟时间，而是依据浏览器的刷新频率而定（帧）
var requestId = window.requestAnimationFrame(func);
- 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、5
* setInterval 和 setTimeout 的区别？// 执行在面的代码块会输入什么？
setTimeout(function () {
console.log('timeout');}, 1000);
setInterval(function () {
console.log('interval')}, 1000);
// 输入一次 timeout，每隔 1S 输入一次 interval
/——————————–/
// 通过 setTimeout 模仿 setInterval 和 setInterval 有啥区别么？
var callback = function () {
if (times++ > max) {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,
max = 5,
start = Date.now(),
intervalId, timeoutId;
function imitateInterval(fn, delay) {
timeoutId = setTimeout(function () {fn();
if (times <= max) {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);
在 Node.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 中的例子来解释定时器的工作原理，该图为一个简略版的原理图。
上图中，左侧数字代表工夫，单位毫秒；左侧文字代表某一个操作实现后，浏览器去询问以后队列中存在哪些正在期待执行的操作；蓝色方块示意正在执行的代码块；右侧文字代表在代码运行过程中，呈现哪些异步事件。该图大抵流程如下：* 程序开始时，有一个 JS 代码块开始执行，执行时长约为 18ms，在执行过程中有 3 个异步事件触发，其中包含一个 setTimeout、鼠标点击事件、setInterval
* 第一个 setTimeout 先运行，延迟时间为 10ms，稍后鼠标事件呈现，浏览器在事件队列中插入点击的回调函数，稍后 setInterval 运行，10ms 达到之后，setTimeout 向事件队列中插入 setTimeout 的回调
* 当第一个代码块执行实现后，浏览器查看队列中有哪些事件在期待，他取出排在队列最后面的代码来执行
* 在浏览器解决鼠标点击回调时，setInterval 再次查看到达到延迟时间，他将再次向事件队列中插入一个 interval 的回调，当前每隔指定的延迟时间之后都会向队列中插入一个回调
* 前面浏览器将在执行完以后队头的代码之后，将再次取出目前队头的事件来执行
这里只是对定时器的原理做一个简略版的形容，理论的处理过程比这个简单。## 四、题目答案
好啦，咱们当初再来看看下面的面试题的答案。第一题
> alert 永远都不会执行，因为 JS 是单线程的，且定时器的回调将在期待以后正在执行的工作实现后才执行，而 while(t) {} 间接就进入了死循环始终占用线程，不给回调函数执行机会
第二题
> 代码会输入 5 5 5 5 5，理由同上，当 i = 0 时，生成一个定时器，将回调插入到事件队列中，期待以后队列中无工作执行时立刻执行，而此时 for 循环正在执行，所以回调被搁置。当 for 循环执行实现后，队列中存在着 5 个回调函数，他们的都将执行 console.log(i) 的操作，因为以后 JS 代码上中并没有应用块级作用域，所以 i 的值在 for 循环完结后始终为 5，所以代码将输入 5 个 5
第三题
> 这个问题波及到 this 的指向问题，由 setTimeout() 调用的代码运行在与所在函数齐全拆散的执行环境上. 这会导致这些代码中蕴含的 this 关键字会指向 window ( 或全局) 对象，window 对象中并不存在 shout 办法，所以就会报错，批改计划如下:var obj = {
msg: 'obj',
shout: function () {alert(this.msg);
},
waitAndShout: function() {
var self = this; // 这里将 this 赋给一个变量
setTimeout(function () {self.shout();
}, 0);
}};
obj.waitAndShout();
## 五、须要留神的点
* setTimeout 有最小工夫距离限度，HTML5 规范为 4ms，小于 4ms 依照 4ms 解决，然而每个浏览器实现的最小距离都不同
* 因为 JS 引擎只有一个线程，所以它将会强制异步事件排队执行
* 如果 setInterval 的回调执行工夫长于指定的提早，setInterval 将无距离的一个接一个执行
* this 的指向问题能够通过 bind 函数、定义变量、箭头函数的形式来解决
