Appearance

Return to top
On this page

浏览器中的事件循环 ​

如果在执行代码的时候，有异步操作

image.png

插入一个 setTimeout 函数调用

ts
function sum(num1, num2) {
  return num1 + num2
}

function bar() {
  return sum(20, 30)
}

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

bar()
function sum(num1, num2) {
  return num1 + num2
}

function bar() {
  return sum(20, 30)
}

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

bar()

宏任务和微任务 ​

事件循环中维护着两个队列

宏任务队列: ajax, setTimeout, setInterval, DOM 监听， UI Rendering

微任务队列 promise 中 then 的回调， queueMicrotask()

执行 JavaScript 中代码的顺序

  1. main script 中代码优先执行
  2. 在执行任何一个宏任务之前，都会先查看微任务队列中是否有任务需要执行
  3. 宏任务执行之前，必须保证微任务队列是空的
  4. 如果微任务不是空的，那么就优先执行微任务中的回调

Promise 测试题 ​

ts
console.log('start')
setTimeout(() => {
  new Promise((resolve) => {
    resolve()
  }).then(() => {
    new Promise((resolve) => {
      resolve()
    }).then(() => {
      console.log('then')
    })
    console.log('first')
  })
})

new Promise((resolve) => {
  resolve()
}).then(() => {
  console.log(666)
})

setTimeout(() => {
  console.log('setTimeout2')
})

queueMircotask(() => {
  console.log('queuemircotask')
})
new Promise((resolve) => {
  resolve()
}).then(() => {
  console.log('then3')
})
console.log('end')
console.log('start')
setTimeout(() => {
  new Promise((resolve) => {
    resolve()
  }).then(() => {
    new Promise((resolve) => {
      resolve()
    }).then(() => {
      console.log('then')
    })
    console.log('first')
  })
})

new Promise((resolve) => {
  resolve()
}).then(() => {
  console.log(666)
})

setTimeout(() => {
  console.log('setTimeout2')
})

queueMircotask(() => {
  console.log('queuemircotask')
})
new Promise((resolve) => {
  resolve()
}).then(() => {
  console.log('then3')
})
console.log('end')

解答

ts
console.log('start')

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}

setTimeout(function () {
  console.log('setTimeout')
})

async1()

new Promise((resolve) => {
  console.log('promise1')
  resolve()
}).then(() => {
  console.log('promise2')
})
console.log('end')
console.log('start')

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}

setTimeout(function () {
  console.log('setTimeout')
})

async1()

new Promise((resolve) => {
  console.log('promise1')
  resolve()
}).then(() => {
  console.log('promise2')
})
console.log('end')

解答

在github 上编辑文档