任务队列

1.案例

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)

2.初步猜测结果

• 打印猜测1，3，4，2 从上到下代码输出

3.测试验证，发现和预想不一致，为什么？

测试结果

1
2
<·underfined
3
4

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执行上下文>
  循环扫描任务队列

5.范例

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

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