Why return a Promise inside then callback function will delay the microtask execute order in js All In One

Why return a Promise inside then callback function will delay the microtask execute order in js All In One

Why does returning a Promise in the then callback function in js delay the execution sequence of the microtask

为什么 js 中在 then 的回调函数中返回一个 Promise 会延迟 microtask 的执行顺序

// Q: https://www.lzane.com/tech/event-loop-microtasks/

Promise.resolve().then(() => {
  console.log('\n',0);
  // return Promise 延迟 ???
  return Promise.resolve();
  // return;
}).then(() => {
  console.log('\n',4);
});

Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() =>{
  console.log(6);
}).then(() =>{
  console.log(7);
});


// 事件循环，微任务队列
// 第一轮： 0，1, return Promise 延迟 ???
// 第二轮： 2, Promise.resolve() 微任务排队
// 第三轮： 3，4,
// 第四轮： 5,
// 第五轮： 6,
// 第六轮： 7,



// 解释 ???

/*
0
1
2
3
4
5
6
7
*/


/*

Promise.resolve().then(() => {
  console.log(0);
  return Promise.resolve(4);
}).then((res) => {
  console.log(`res =`, res);
});

Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() =>{
  console.log(6);
});

0
1
2
3
res = 4
5
6
*/

/*

Promise.resolve().then(() => {
  console.log(0);
  // return Promise.resolve(4);
}).then((res) => {
  console.log(`res =`, res);
});

Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() =>{
  console.log(6);
});

0
1
res = undefined
2
3
5
6

*/


/*

Promise.resolve().then(() => {
  console.log(0);
  // return Promise 延迟 ???
  // return Promise.resolve(4);
  return 4;
}).then((res) => {
  console.log(`res =`, res);
});

Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() =>{
  console.log(6);
});

0
1
res = 4
2
3
5
6

*/

https://www.lzane.com/tech/event-loop-microtasks/

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

https://javascript.info/microtask-queue

https://stackoverflow.com/questions/43592229/promise-then-job-execution-order

https://www.digitalocean.com/community/tutorials/understanding-the-event-loop-callbacks-promises-and-async-await-in-javascript

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

https://www.geeksforgeeks.org/what-is-the-difference-between-microtask-queue-and-callback-queue-in-asynchronous-javascript/

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---