await/promise 宏任务 微任务 执行顺序

最新推荐文章于 2024-01-29 23:27:01 发布
最新推荐文章于 2024-01-29 23:27:01 发布
阅读量844 收藏 3
点赞数
分类专栏： 菜鸡啄食——JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39692513/article/details/107716547
版权

1eventloop

js是单线程，故同时只能执行一个任务，eventloop是保证执行事件不阻塞的一个事件执行机制。

js中分为同步任务和异步任务。异步任务又分为宏任务和微任务。

js主线程在执行代码时，首先执行同步任务，然后执行异步任务。在按照代码顺序执行时，主线程执行同步代码，遇到异步代码，判断宏任务还是微任务，将其注册事件，分别加入宏任务队列和微任务队列，同步代码执行完毕后，判断微任务队列是否有事件，若有，将微任务队列所有事件执行完毕，在按照先进先出的顺序执行的一个宏任务事件。

await 会让出线程，阻塞后面的代码执行，跳出执行外部的同步代码，执行完毕，会返回执行被阻塞的代码。

2.事件分类

宏任务：setTimeout/setInterval/ requestAnimationFrame的回调函数

微任务：promise.then()/process.nexttick中的回调函数

同步代码：console.log/settimeout/new promise()等

3执行顺序

执行顺序，先宏任务再微任务ÿ

最低0.47元/天 解锁文章
菜鸟中的菜菜鸟
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
宏任务微任务执行顺序（简洁易懂）
weixin_62765236的博客
08-05 2069
宏任务微任务
宏任务 && 微任务 && async && await（图解）
mister、奎
07-15 6071
1.宏任务和微任务 宏任务和微任务是等待任务队列中的异步任务的处理机制；(JS执行有同步任务队列和等待任务队列) 浏览器的任务队列： 主任务队列存储的都是同步任务； 等待任务队列存储的都是异步任务； 首先浏览器会把主任务队列中的同步任务挨个全部执行完，然后再去等待任务队列中看哪个任务可以执行了，然后把该执行的任务放到主任务队列中去执行，等这个任务执行完，再去等待任务中看谁可以执行了，再把...
js：Promise理解、async和await的理解、宏任务/微任务、异常处理、防抖和节流
Litt_White的博客
08-14 3801
Promise理解、async和await的理解（未完成）、构造函数/原型/原型链、防抖和节流、this指向（普通函数，箭头函数，JS/Vue的this）、上下文环境、作用域和闭包
await后面的所有类型代码直接扔到微任务队列中，稍后执行
彤先森的博客
07-15 734
await后面的所有类型代码直接扔到微任务队列中，稍后执行
async/await 以及同步任务、异步任务、宏任务与微任务【附例题】
最新发布
dashenfeng1的博客
01-29 1457
一般情况，我们将异步任务又分为宏任务和微任务。宏任务：由宿主（Node、浏览器等）发起，在微任务后运行，并会触发新一轮的 netxtTick()。script (可以理解为外层同步代码)setTimeout（定时器） / setInterval（计数器）UI rendering / UI事件微任务：由JS引擎发起，在宏任务前运行，不会触发新一轮的 netxtTick()。Object.observe（已废弃；Proxy 对象替代）
宏任务和微任务的理解(关于async/await、promise和setTimeout执行顺序）
weixin_43799793的博客
03-28 780
事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。此时的await会让出线程，阻塞async内后续的代码，先去执行async外的代码。JavaScript的事件分两种，
JavaScript事件循环及宏任务微任务原理解析
10-14
3. 微任务执行完毕后，主线程检查宏任务队列，取出第一个宏任务执行。 4. 宏任务执行完毕，再次检查微任务队列，重复第2步。 5. 这个过程持续进行，形成一个循环。 示例代码中的打印顺序为：script start, script ...
JS事件循环机制event loop宏任务微任务原理解析
10-14
总之，JavaScript的事件循环机制是其异步编程模型的核心，理解宏任务和微任务的区别以及它们在事件循环中的执行顺序，对于编写高效、可维护的JavaScript代码至关重要。通过不断实践和学习，开发者可以更好地掌控...
js代码-宏任务，微任务，异步任务执行过程。
07-16
理解宏任务和微任务的区别以及它们在事件循环中的执行顺序，对于编写高性能的JavaScript代码至关重要。这有助于避免阻塞UI、提高应用的响应速度，以及正确地处理异步操作。 在实际开发中，开发者需要注意合理安排...
js代码-浏览器宏任务和微任务的触发机制
07-15
了解了宏任务和微任务的执行顺序后，开发者可以更好地设计异步流程，避免阻塞主线程，提高应用程序性能。例如，尽量减少同步操作，多使用Promise来组织异步逻辑，这样可以确保微任务在当前宏任务结束后尽快得到执行...
async、await、promise、setTimeout关于宏任务和微任务
追风筝的人
04-15 3117
async、await、promise、setTimeout关于宏任务和微任务
[随笔一记]事件循环——async和await
Tian_randai的博客
11-04 872
但async内部遇到await的时候，只有当await右边跟随的代码执行完毕的时候，才会执行后面的代码，此时后面的代码也可以算作内部的微任务。值得注意的是，promise内部遇到resolve（）和reject（）调用的时候，会继续执行后面的代码，遇到了await 先执行右边的代码才会执行后面的代码。async和await也属于异步任务中的微任务。首先执行同步任务 script start。然后执行微任务 async1 start。最后执行宏任务 setTimeout。所以 接着是 async2。
宏任务和微任务的执行顺序
m0_73727623的博客
01-13 4783
在同一次循环中，微任务不参与事件循环，微任务会被推到当前循环对应的微任务队列中，即使是微任务中的微任务。宏任务将开启新的事件循环。
javascript的async,await的宏任务和微任务的执行顺序
abc9365的博客
01-12 572
理解async,await不同情况下的执行流程
js async/await
weixin_30596165的博客
02-23 363
一、async 带async关键字的函数，是声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会自动用Promise.resolve()包装。 async function test() { return 'test' } test(); 返回值为Promise {<resolved>: "test"}。 二、a...
Promise async/await EventLoop 宏任务/微任务
Cxil的博客
11-19 415
调用then-fs提供的readFile()方法，可以异步的读取文件的内容，它的返回值是Promise的实例对象，因此可以调用.then（）方法 为每个Promise异步操作指定成功和失败之后的回调函数。通过 .then()方法的链式调用，就解决了回调地狱的问题。由于 node.js官方提供的fs模块仅支持以回调函数的方式读取文件，不支持Promise的调用方式，因此，需要先运行如下的命令，安装 then-fs 第三方包。调用.then()方法时，成功的回调函数是必选的，失败的回调函数是可选的。
promise async与await 宏/微任务
没时间
08-19 253
promise 作用，在宏任务假死情况下的异步操作 promise(resolve,reject) 参数一是返回成功，参数二是返回失败 promise().then().then() .then()链式操作解决了地狱回调(操作复杂，且不容易改变逻辑代码) getpromise(num) { return new Promise((resolve, reject) => { if (num > 1) { return resolve; } else
JS中await、async、宏任务、微任务的执行顺序
luxiaopengyou的博客
09-28 2432
宏任务和微任务 1、宏任务和微任务都是队列（先进先出），宏任务有script、setTimeout、setInterval等，微任务有Promise.then/ catch/finally、process.nextTick等。 2、一个宏任务执行完，判断是否有可执行的微任务，有则执行完所有微任务，否则执行下一个宏任务。 async和await 1、async修饰符：async修饰的函数，默认返回 new Promise对象的resolve内容（若被async修饰的函数无返回值，则最终无返回值）。如此调用
async/await/Promise以及js中的微任务和宏任务之间的关系
sunhonghui9527的博客
07-03 2320
宏任务与微任务 同步和异步任务分别进入不同的执行"场所"，同步的任务进入主线程，异步的进入Event Table并注册函数。当异步函数完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。 除此之外，在js中还存在宏任务和微任务。 js中的宏任务一般是：包括整体代码script，setTimeout，setInterval。 微任务是：Pro
async await宏任务微任务
08-30
在 JavaScript 中，async/await 是用于处理异步操作的语法糖。它建立在 Promise 和生成器函数之上，使得编写和处理异步代码更加简洁和直观。 当我们在一个 async 函数中使用 await 关键字来等待 Promise 的解决时，事件循环会暂停执行 async 函数中的代码，并等待 Promise 的状态变为解决（resolve）。一旦 Promise 被解决，async 函数将继续执行，并返回解决的值。 宏任务（macro task）和微任务（micro task）是异步任务的两类不同分类。宏任务通常包括 setTimeout、setInterval、I/O 操作等，而微任务则包括 Promise、process.nextTick 等。 在事件循环中，宏任务会优先执行，而微任务会在当前宏任务执行结束后立即执行。也就是说，在一个宏任务中产生的所有微任务会在下一个宏任务执行前被处理完毕。async/await 使用的 Promise 是微任务，因此在 async 函数中使用 await 时，会先执行等待状态的 Promise 的回调函数（微任务），然后再执行其他的宏任务。 总结起来，async/await 允许我们以同步的方式编写异步代码，并且通过微任务确保代码执行的顺序和可控性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值