【JS小例】宏任务和微任务

小试一下：

    console.log('同步代码1')
    setTimeout(() => {
        console.log('macro setTimeout')
    }, 0)
    new Promise((resolve) => {
      console.log('同步代码2 Promise')
      resolve()
    }).then(() => {
        console.log('micro then')
    })
    console.log('同步代码3')

运行后结果：

捋一下过程：

• 执行同步代码console.log('同步代码1')
• 执行同步代码console.log('同步代码2 Promise')
• 执行同步代码console.log('同步代码3')
• 执行微任务console.log('micro then')
• 执行宏任务console.log('macro setTimeout')

可以看到微任务优先于宏任务执行。

在来个复杂一些的：

    async function fn1 () {
      console.log('fn1')
      await setTimeout(() => {
        console.log('fn1 setTimeout')
      }, 0);
      new Promise((resolve, reject) => {
          console.log('fn1 promise')
        resolve()
      }).then(res => {
        console.log('fn1 promise then')
      })

      fn2()
      fn3()
    }
    async function fn2 () {
      await setTimeout(() => {
        console.log('fn2 setTimeout')
        new Promise((resolve, reject) => {
          console.log('fn2 promise')
          resolve()
        }).then(res => {
          console.log('fn2 promise then')
        })
      }, 0);
    }
    async function fn3 () {
      await setTimeout(() => {
        console.log('fn3 setTimeout')
      }, 0);
    }

    console.log('main')

    fn1()

    new Promise((resolve, reject) => {
      console.log('main promise')
      resolve()
    }).then(res => {
      console.log('main promise then')
    })

    new Promise((resolve, reject) => {
      console.log('main promise 2')
      resolve()
    }).then(res => {
      console.log('main promise 2 then')
    })

运行结果是：

 

你答对了吗？

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。