前置知识
浏览器页面是由消息队列和事件循环系统来驱动的
初认识
定时器基础使用：
function showMsg(){
console.log('3000ms 后的惊喜');
}
console.log('等惊喜...');
var timerID = setTimeout(showMsg, 3000);
当然，你也可以在定时器执行前，取消执行计划：
var isCancle = true;
var test = function(){
var grade = 0;
console.log('等惊喜...');
// 定义定时器回调函数
function showMsg(){
grade = 100;
console.log('3000ms 后的惊喜：grade=' + grade);
}
// 设置定时器
var timerID = setTimeout(showMsg, 3000);
// 控制是否取消定时器
if(isCancle){
clearTimeout(timerID);
console.log('等不到惊喜了！');
}else{
console.log('惊喜在路上！');
}
};
test();
实验截图：
image.png
机制分析
执行一段异步任务，往往需要先将任务添加到消息队列中，事件循环系统就会按照消息队列中的顺序来执行事件。不过，通过定时器设置回调函数有点特别，它们需要在指定的时间间隔内被调用，所以不能将定时器的回调函数直接添加到消息队列中。浏览器对 setTimeout 做了什么处理呢？
延迟队列。在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列，这个队列中维护了需要延迟执行的任务列表，包括了定时器和 Chromium 内部一些需要延迟执行的任务。JavaScript 创建的定时器回调任务就是被维护在延迟队列中。
注意事项
- 定时器任务的执行不会总是如约而至
当前任务执行时间过久，从而导致定时器设置的任务被延后执行
function bar() {
console.log('定时器任务被执行了')
}
function foo() {
setTimeout(bar, 0);
for (let i = 0; i < 5000; i++) {
console.log(i)
}
}
foo();
在上面这段代码中，定时器设置了 0 延时的回调，事实上浏览器并不是这么做的，因为被当前任务阻塞了。
实验截图：
日志.png
性能分析.png
- setTimeout 设置的回调函数中的 this 不符合直觉
如果被 setTimeout 推迟执行的回调函数是某个对象的方法，那么该方法中的 this 关键字将指向全局环境（开启了全局执行上下文），而不是定义时所在的那个对象。
'use strict'
var name= 1;
var MyObj = {
name: 2,
showName: function(){
console.log(this.name);
}
}
setTimeout(MyObj.showName,1000);// 1
MyObj.showName();// 2
- 其他
- 定时器嵌套调用，系统会设置最短时间间隔 4ms
- 未激活的页面，setTimeout 执行最小间隔是 1000 毫秒
- 延时执行时间有最大值，溢出将导致立即执行
