js中的宏任务和微任务

布满荆棘的人生 2023-01-06 01:12 279阅读 0赞

宏任务和微任务的关系  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]  
从代码入手最好理解，如下：

setTimeout(() => { 
        //执行后 回调一个宏事件
        console.log('内层宏事件3')
    }, 0)
    console.log('外层宏事件1');
    
    new Promise((resolve) => { 
        console.log('外层宏事件2');
        resolve()
    }).then(() => { 
        console.log('微事件1');
    }).then(()=>{ 
        console.log('微事件2')
    })

执行过程：

*  浏览器进入第一个宏任务，也就是主线程；
 *  遇到setTimeOut分发到宏任务中；
 *  遇到console直接执行，输出“外层宏事件1”；
 *  遇到new Promise直接执行，输出“外层宏事件2”；
 *  执行then被分发到微任务中；
 *  第一轮宏任务执行完毕，开始执行微任务，打印“微事件1”“微事件2”；
 *  第一轮微任务执行完毕，执行第二轮宏事件，打印setTimeOut里面的内容“宏事件3”；

执行结果：

*  外层宏事件1
 *  外层宏事件2
 *  微事件1
 *  微事件2
 *  内层宏事件3

[转自博客][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]: /images/20221119/72f978d1b7144f01bc91891e3eea176f.png
[Link 1]: https://www.cnblogs.com/wangziye/p/9566454.html

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 Node.js---宏任务和微任务

宏任务和微任务都是异步耗时任务。宏任务有setImmediate，setTimeout，setInterval， I/O，异步ajax，文件操作等宏任务中的优

Love The Way You Lie/ 2024年04月01日 06:30/ 0 赞/ 83 阅读

相关 js中的宏任务与微任务

如果你已经知道了js中存在宏任务和微任务，那么你一定已经了解过promise了。因为在js中promise是微任务的一个入口。先来看一道题： setTimeou

水深无声/ 2023年10月08日 10:31/ 0 赞/ 18 阅读

相关 js中的宏任务与微任务

事件循环 JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，

小鱼儿/ 2023年10月07日 20:57/ 0 赞/ 66 阅读

相关 Js中什么是宏任务和微任务

宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。宏任务（Macrotask）大概如下：setTimeout setInterval MessageCh

朴灿烈づ我的快乐病毒、/ 2023年10月07日 00:00/ 0 赞/ 41 阅读

相关宏任务和微任务

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

爱被打了一巴掌/ 2023年09月30日 20:44/ 0 赞/ 20 阅读

相关 js执行时序宏任务和微任务

宏任务一般是：包括整体代码`script`，`setTimeout`，`setInterval`、`I/O`、`UI render`。微任务主要是：`Promise`、`

ゝ一世哀愁。/ 2023年02月18日 05:26/ 0 赞/ 13 阅读

相关 js中的宏任务和微任务

宏任务和微任务的关系 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

布满荆棘的人生/ 2023年01月06日 01:12/ 0 赞/ 280 阅读

相关【JS】宏任务、微任务和 Promise 的性能

[https://juejin.im/post/6854573216212451336][https_juejin.im_post_6854573216212451336]

素颜马尾好姑娘i/ 2022年12月19日 01:20/ 0 赞/ 264 阅读

相关 js事件循环：微任务和宏任务

事件循环：微任务和宏任务浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于事件循环的。理解事件循环的工作方式对于代码优化很重要，有时

墨蓝/ 2022年10月18日 04:54/ 0 赞/ 259 阅读

相关 js 宏任务和微任务

1.概念：宏任务（macrotask ）和微任务（microtask ）表示异步任务的两种分类。常见宏任务：I/O 、setTimeout、setInterval；微任务：P

谁借莪１个温暖的怀抱￠/ 2021年11月17日 08:38/ 0 赞/ 419 阅读