在渲染进程中,所有运行在主线程上的任务都需要先添加到消息队列中,然后 事件循环系统 再按照顺序执行消息队列中的任务。
例如:
当接收到 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)