美文网首页
微任务执行顺序

微任务执行顺序

作者: 苍老师的眼泪 | 来源:发表于2022-04-18 23:52 被阅读0次

第一题:
链式Promise

    new Promise((resolve, reject) => {
      console.log(1)
      resolve()
    }).then(() => {
      console.log(2)
      new Promise((resolve, reject) => {
        console.log(3)
        resolve()
      }).then(() => {
        console.log(4)
      }).then(() => {
        console.log(5)
      })
    }).then(() => {
      console.log(6)
    })

    new Promise((resolve, reject) => {
      console.log(7)
      resolve()
    }).then(() => {
      console.log(8)
    })

  // 执行结果:1,7,2,3,8,4,6,5

第二题:
async / await

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

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

    Promise.resolve(console.log(3)).then(() => { console.log(4) })

    async function async1() {
      console.log(5)
      await async2()
      console.log(6)
    }

    async function async2() {
      console.log(7)
    }

    async1()

    // 结果:3, 5, 7, 4, 6, 2, 1

第三题:
宏任务嵌套微任务

    console.log(1)

    setTimeout(function() {
      console.log(2)
      new Promise(function(resolve) {
        console.log(3)
        resolve()
      }).then(function() {
        console.log(4)
      })
    });

    new Promise(function(resolve) {
      console.log(5)
      resolve()
    }).then(function() {
      console.log(6)
    })

    setTimeout(function() {
      console.log(7)
      new Promise(function(resolve) {
        console.log(8)
        resolve()
      }).then(function() {
        console.log(9)
      })
    });

    // 1 5 6 2 3 4 7 8 9 

第四题:

Promise.resolve().then(() => {
    console.log(0)
    return Promise.resolve(4)
}).then((res) => {
    console.log(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, 4, 5, 6

相关文章

  • 微任务执行顺序

    第一题:链式Promise 第二题:async / await 第三题:宏任务嵌套微任务 第四题:

  • JS事件循环机制Event Loop

    执行顺序 微任务——DOM渲染——宏任务 微任务 Promise.thenObject.observeMutati...

  • js 异步执行顺序

    js的执行顺序,先同步后异步异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask...

  • 详解JavaScript的任务、微任务、队列以及代码执行顺序

    摘要: 理解JS的执行顺序。 作者:前端小智 原文:详解JavaScript的任务、微任务、队列以及代码执行顺序 ...

  • 2021-03-09 宏任务和微任务

    执行顺序:0、2、4、3、1先执行外层宏任务,再执行微任务,然后执行内层宏任务

  • js中宏任务、微任务执行顺序

    如上图所示,在js中先执行主线程中的所有任务,再轮询执行所有的微任务,最后轮询执行所有的主任务。定时器属于宏任务p...

  • 事件执行的机制(Event Loop)

    执行顺序 一开始整段脚本作为第一个宏任务执行 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队...

  • ES6 模块化 导入和导出

    0. 1 宏任务和微任务 0.1 宏任务和微任务的执行顺序 0.2 业务场景 一.默认导出 1.1默认导出的语法:...

  • Event Loop

    一,事件环的执行顺序 1,例子 2,main script=》微任务=》宏任务中的第一项=》微任务=》宏任...

  • 浏览器与Node的事件循环有何区别

    浏览器 关于微任务和宏任务在浏览器的执行顺序是这样的 执行一只task(宏任务) 执行完micro-task队列(...

网友评论

      本文标题:微任务执行顺序

      本文链接:https://www.haomeiwen.com/subject/omwjertx.html