任务队列相关的文章，讲解单线程、任务队列相关的概念

prtyaa 2023-12-26 18:58:54  51931

分类专栏：资讯

一、案例

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；500ms时输出3；1000ms时输出4；2000ms时输出2。

三、测试验证

运行代码测试验证，立即输出1，过了2000毫秒几乎同时按顺序输出2、3、4。

四、引出原理讲解

任务队列
1、所有同步任务都在主线程上执行，形成一个执行栈。
2、主线程之外，还存在一个"任务队列"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3、一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4、只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。

五、把原理套在案例里

1、进入全局执行上下文

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

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

输出1

2、进入useTime执行上下文

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

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

3、返回全局执行上下文

输出2；

同步任务执行完毕，开始扫描任务队列；

取出队列的fn1

4、进入fn1执行上下文

输出3；

退出fn1执行上下文；

取出队列的fn2

5、进入fn2执行上下文

输出4；

退出fn2执行上下文

六、更多案例印证原理

1、立即按顺序输出2和1

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

2、while一直循环，浏览器卡死，永远不会输出'end'

let t = true  
setTimeout(() => { 
  t = false 
}, 1000)  

while(t){ }  
console.log('end')

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31073

赞同 0

评论 0 条