在渲染进程中，所有运行在主线程上的任务都需要先添加到消息队列中，然后 事件循环系统 再按照顺序执行消息队列中的任务。
例如：
当接收到 HTML 文档数据，渲染引擎就会将“解析 DOM”事件添加到消息队列中，
当用户改变了 Web 页面的窗口大小，渲染引擎就会将“重新布局”的事件添加到消息队列中。
当触发了 JavaScript 引擎垃圾回收机制，渲染引擎会将“垃圾回收”任务添加到消息队列中。
同样，如果要执行一段异步 JavaScript 代码，也是需要将执行任务添加到消息队列中
而定时器设置的回调事件为了能在规定时间内执行，Chrome中有一个延迟队列，当创建定时器后，渲染进程会将该定时器的回调任务添加进延迟队列中。
- 创建延迟队列（源码）：
DelayedIncomingQueue delayed_incoming_queue;
- JS 调用 setTimeout 设置回调函数时，渲染进程创建一个回调任务：
struct DelayTask{
int64 id；
CallBackFunction cbf;
int start_time;
int delay_time;
};
DelayTask timerTask;
timerTask.cbf = showName; //设置回调函数
timerTask.start_time = getCurrentTime(); // 获取当前时间
timerTask.delay_time = 200;// 设置延迟执行时间
3.将该任务添加进延迟队列中：
delayed_incoming_queue.push(timerTask)；
现在通过定时器发起的任务就被保存到延迟队列中了。
以下为消息循环系统触发延迟队列：
void ProcessTimerTask(){
// 从 delayed_incoming_queue 中取出已经到期的定时器任务
// 依次执行这些任务
}
TaskQueue task_queue；
void ProcessTask();
bool keep_running = true;
void MainTherad(){
for(;;){
// 执行消息队列中的任务
Task task = task_queue.takeTask();
ProcessTask(task);
// 执行延迟队列中的任务
ProcessDelayTask() //用来处理延迟执行任务的函数
if(!keep_running) // 如果设置了退出标志，那么直接退出线程循环
break;
}
}
在上段代码中，
- 处理完消息队列中的一个任务之后，就开始执行 ProcessDelayTask 函数。
- ProcessDelayTask 函数会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。
- 等到期的任务执行完成之后，再继续下一个循环过程。通过这样的方式，一个完整的定时器就实现了。
In addition，定时器可以被取消，通过clearTimeout 函数。每个定时器JS引擎会返回一个定时器的id，在还没被执行时，是可以通过id找到延迟队列中的任务，并将其从中删除。
clearTimeout(timer_id)
注意事项：
一、如果 setTimeout 存在嵌套调用，那么系统会设置最短时间间隔为 4 毫秒
function cb() { setTimeout(cb, 0); }
setTimeout(cb, 0); //中间会有4ms的间隔，为Chrome判断该函数方法被阻塞了
二、如果当前任务执行时间过久，会影延迟到期定时器任务的执行
function bar() {
console.log('bar')
}
function foo() {
setTimeout(bar, 0);
for (let i = 0; i < 5000; i++) {
let i = 5+8+8+8
console.log(i)
}
}
foo()
通过 setTimeout 设置的回调任务被放入了消息队列中并且等待下一次执行，这里并不是立即执行的；要执行消息队列中的下个任务，需要等待当前的任务执行完成，由于当前这段代码要执行 5000 次的 for 循环，所以当前这个任务的执行时间会比较久一点。这势必会影响到下个任务的执行时间。
三、未激活的页面，setTimeout 执行最小间隔是 1000 毫秒
除了前面的 4 毫秒延迟，还有一个很容易被忽略的地方，那就是未被激活的页面中定时器最小值大于 1000 毫秒，也就是说，如果标签不是当前的激活标签，那么定时器最小的时间间隔是 1000 毫秒，目的是为了优化后台页面的加载损耗以及降低耗电量。这一点你在使用定时器的时候要注意。
四、延时执行时间有最大值
Chrome、Safari、Firefox 都是以 32 bit 来存储延时值的，32bit 最大只能存放的数字是 2147483647 毫秒，如果 setTimeout 设置的延迟值大于 2147483647 毫秒（大约 24.8 天）时就会溢出，这导致定时器会被立即执行。
function showName(){
console.log(" 呵呵 ")
}
var timerID = setTimeout(showName,2147483648);// 会被立即调用执行
五、 setTimeout 设置的回调函数中的 this 不符合直觉
如果被 setTimeout 推迟执行的回调函数是某个对象的方法，那么该方法中的 this 关键字将指向全局环境window，而不是定义时所在的那个对象。
var name= 1;
var MyObj = {
name: 2,
showName: function(){
console.log(this.name);
}
}
setTimeout(MyObj.showName,1000) //输出为1
解决办法：
1.用匿名函数
// 箭头函数
setTimeout(() => {
MyObj.showName()
}, 1000);
// 或者 function 函数
setTimeout(function() {
MyObj.showName();
}, 1000)
2.bind
setTimeout(MyObj.showName.bind(MyObj), 1000)
