JavaScript中的宏任务和微任务机制是什么(javascript,开发技术)

时间:2024-02-22 05:16:21 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

引入

//开启一个定时器1秒后执行setTimeout(()=>{console.log(1)},1000)console.log(2)

以上的代码控制台的输出结果是“ 2,1";即先输出2再输出1;先执行的是打印”2“的内容,再执行定时器中1秒之后打印”1"的内容;

//开启一个定时器1秒后执行setTimeout(()=>{console.log(1)},0)console.log(2)

将定时器中的时间改为0,即立即触发,代码控制台的输出结果仍然为"2, 1";定时器的作用是间隔一段时间后,将函数放入到任务队列中,而 ”console.log(2)“则是直接在调用栈中执行,执行完毕了,消息队列中的定时器才会进入到调用栈中执行代码

宏任务与微任务

宏任务队列

JavaScript中的宏任务和微任务机制是什么

微任务队列

JavaScript中的宏任务和微任务机制是什么

栈与调用栈

JS是单线程的,它的运行是基于时间循环机制(event loop)

调用栈

栈是一种数据结构,后进先出(l类比于弹夹中的子弹最后压进最先射出)

调用栈中,放的是要执行的代码

执行的代码在栈中从上到下依次执行(上面的是左后进去的,所以最先执行)

消息队列(任务队列)

队列 队列是一种数据结构,先进先出(类比于排队打饭,排前面的先打)

队列中,放的是将要执行的代码

当调用栈中的代码执行完毕后,队列中的代码按照顺序依次进入到调用栈中执行

在JS中任务队列有两种

宏任务队列

大部分代码都去宏任务队列中排队

微任务队列

Promise的回调函数(then、catch、finally)在微任务队列中排队

整个流程

  • 执行调用栈中的代码

  • 执行微任务中的所有任务

  • 执行宏任务中的所有任务

//开启一个定时器1秒后执行setTimeout(()=>{console.log(1)},0)Promise.resolve(1).then(()=>{console.log(2)})//全局作用域的代码一定是位于栈中的console.log(3)

上述代码的执行结果是”3 2 1“;打印"3”的语句是位于全局作用域中,一定是位于调用栈中的,所以最先执行,

Promise的执行原理

  • Promise在执行时,then就相当于给Promise了回调函数

  • 当promnise的状态从pending 变为 fulfilled时,then的回调函数会被放入任务队列中

queueMicrotask() 用来向微任务队列中添加一个任务

//开启一个定时器1秒后执行,在宏任务队列中等待setTimeout(()=>{console.log(1)},0)//在微任务队列中等待Promise.resolve(1).then(()=>{console.log(2)})//在为任务队列中Promise.resolve().then(()=>{console.log(3)})

执行结果是“2 3 1”;首先“2”和“3"是放在微任务中的,”1“是放在宏任务中,先执行的应该是微任务中的,队列中遵循“先进先出”,“2"先进所以先出到调用栈中运行,然后是”3“,最后是宏任务中的"1"

//在微任务队列中等待Promise.resolve(1).then(()=>{setTimeout(()=>{console.log(1)},0)})//在为任务队列中Promise.resolve().then(()=>{console.log(3)})

执行的结果是”3 1”;定时器的外层虽然是放在微任务的中,外层的Promise先执行,但由于内部有定时器随后进入了宏任务,所以下面的“3”处于微任务中就直接进入调用栈执行了,所以执行的结果为“31"

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:JavaScript中的宏任务和微任务机制是什么的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Java8怎么实现对List&lt;Integer&gt;的求和下一篇:

10 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18