首页 > 其他 > 详细

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

时间:2020-02-13 13:29:10      阅读:64      评论:0      收藏:0      [点我收藏+]

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

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

原文:https://www.cnblogs.com/smzd/p/12303219.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!