JavaScript有关任务队列的简单描述

案例：

const useTime = t => {
 let start = Date.now()
 while(Date.now() - start < t) {}
}
let timer1 = setTimeout(() => {
 console.log(3)
}, 500)
let timer2 = setTimeout(() => {
 console.log(4)
}, 1000)
console.log(1)
useTime(2000)
console.log(2)

猜测以上代码的执行结果是什么？

一般认为会按照执行时间的长短，输出顺序为

1、3、4、2

然而实践后会发现顺序为

1、2、3、4

原理

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个“任务队列”（task queue），只要异步任务有了运行结果，就在“任务队列”中放置一个事件。
3. 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看里边有哪些事件。哪些对应的异步任务，于是结束等待状态，进入“执行栈”开始执行。
4. 主线程不断重复上边的第三步。

执行流程

① 进入全局执行上下文

创建由第三方计时模块管理的timer1，timer1会在500ms后把任务fn1放入任务队列

创建由第三方计时模块管理的timer2，time2会在1000ms后把任务fn2放入任务队列

输出1

② 进入useTime执行上下文

执行代码耗时2000ms，退出useTime执行上下文

在500ms和1000ms时timer1和timer2各自完成投放，此操作不属于JS主线程

③ 返回全局执行上下文

输出2

同步任务执行完毕

开始扫描任务队列

取出队列的fn1

• 进入fn1执行上下文

④ 输出3，退出fn1执行上下文

取出队列的fn2

⑤ 进入fn2执行上下文

输出4，退出fn2执行上下文

循环扫描任务队列

更多范例

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

立即依次输出2和1

延时0ms和延时1ms效果其实是一样的，定时器有最小时间粒度

let t = true
setTimeout(() => {
t = false
}, 1000)
while(t){ }
console.log('end')

浏览器卡死，永远不会输出'end'