JS的事件循环机制eventloop

一. Eventloop是什么?

    javascript中事件任务分为宏任务和微任务,执行顺序是先执行宏任务再执行微任务。(异步顺序也是如此)

   任务分为同步和异步, 同步放入主线程立即执行,异步的进入event Table并注册函数,之后放入到event Queue中,等待同步执行完后执行。宏任务的主线程执行完之后, 执行微任务主线程的中的事件,这样算是完成了一次事件循环。接下来查看宏任务的Event Queue中是否有未执行的任务,有的话,就开始第二轮事件循环。

  • 宏任务:整体代码script,setTimeout, setInterval
  • 微任务:Promise.then(非new Promise)
console.log('1');
setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
输出:
1
2
4
5
  • 宏任务同步代码console.log('1')
  • setTimeout,加入宏任务Event Queue,没有发现微任务,第一轮事件循环走完
  • 第二轮事件循环开始,先执行宏任务,从宏任务Event Queue中独取出setTimeout的回调函数
  • 同步代码console.log('2')
  • new Promise,同步执行console.log('4'),发现then,加入微任务Event Queue
  • 宏任务执行完毕,接下来执行微任务执行Promise.then
  • 微任务执行完毕,第二轮事件循环走完,没有发现宏任务,事件循环结束

二:执行栈和队列

(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。

你可能感兴趣的:(前端)