事件循环机制整体流程是什么

JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程,我们称为事件循环过程。一个线程中,事件循环是唯一的,但是任务队列可以拥有多个。任务队列又分为macro-task(宏任务)与micro-task(微任务),在最新标准中,它们被分别称为task与jobs。

macro-task

  1. script(整体代码)
  2. setTimeout
  3. setInterval
  4. setImmediate
  5. I/O
  6. UI render

micro-task

  1. process.nextTick
  2. Promise
  3. Async/Await(实际就是promise)
  4. MutationObserver(html5新特性)

执行机制

执行宏任务,边执行边寻找任务,放入各自队列,然后执行该宏任务产生的微任务,若微任务在执行过程中产生了新的微任务,则继续执行微任务,微任务执行完毕后,再回到宏任务中进行下一轮循环

例子

console.log('script start')//h1 1

async function async1() {
await async2()
console.log('async1 end')//w1--6
}
async function async2() {
console.log('async2 end')//2
}
async1()
console.log(111)//3
setTimeout(function() {
console.log('setTimeout')//h2--9
}, 0)

new Promise(resolve => {
console.log('Promise')//4
resolve()
})
.then(function() {
console.log('promise1')//w2--7
})
.then(function() {
console.log('promise2')//w3--8
})

console.log('script end')//5

开始执行宏任务输出h1-1,执行async1输出2,将微任务w1放入队列,输出3,将宏任务h2放入队列,输出4,输出5至此第一个宏任务结束,开始查找微任务队列,输出w1-6,w2-7,w3-8,没有微任务了输出宏任务h2-9

posted @ 2020-02-13 12:58  霜末之冬  阅读(436)  评论(0编辑  收藏  举报