Nólëbase

字数

980 字

阅读时间

4 分钟

执行时机

setTimeout 和 setInterval 的运行机制是将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop 时重新判断

f1()

setTimeout(() => {
    fn()
}, 2000)

f2()

当定时时间到了后，才会将 setTimeout 的回调函数放入消息队列中，但是具体执行的时机并不只是由定时时间决定的，还取决于当前的执行栈、当前 event loop 的事件执行时间，所以定时时间相当于一个起步时间

// 效果: 同时打印3个2
for (var i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(new Date());
    }, 1000);
}

// 等价于

(function () {
	setTimeout(function () {
        console.log(new Date());
	}, 1000);
	
	setTimeout(function () {
	        console.log(new Date());
	}, 1000);
	
	setTimeout(function () {
	        console.log(new Date());
	}, 1000);
})()

在达到 2000ms 时的那轮 event loop，所有 timer 都达到规定时间可以执行，也就产生了同时响应的效果

setTimeout(fn, 0) 作用

指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。

它在 " 任务队列 " 的尾部添加一个事件，因此要等到主线程把同步任务和 " 任务队列 " 现有的事件都处理完，才会得到执行

为什么最小延迟是 4ms

示例程序：

setTimeout(()=>{console.log(5)},5)
setTimeout(()=>{console.log(4)},4)
setTimeout(()=>{console.log(3)},3)
setTimeout(()=>{console.log(2)},2)
setTimeout(()=>{console.log(1)},1)
setTimeout(()=>{console.log(0)},0)