事件循环(event loop)

宏任务和微任务

任务队列中都是已完成的异步操作。
在当前的微任务没有执行完成时,是不会执行下一个宏任务的。
在同步代码执行完成后才回去检查是否有异步任务完成,并执行对应的回调,而微任务又会在宏任务之前执行。

浏览器环境

Task(macro task):setTimeout, setInterval
micro task: Promise

setTimeout(function() {
  console.log(1);
}, 0);

var promise = new Promise(function executor(resolve) {
  resolve();
}).then(function() {
  console.log(2);
});

console.log(3);

输出结果:3 2 1
macro task 和 micro task 在两个队列中,event loop 执行过程如下:

1 event-loop start
2 microTasks 队列开始清空(执行)
3 检查 Tasks 是否清空,有则跳到 4,无则跳到 6
4 从 Tasks 队列抽取一个任务,执行
5 检查 microTasks 是否清空,若有则跳到 2,无则跳到 3
6 结束 event-loop

从上面的执行过程可以看出,micro task 队列在一次事件循环中不止检查一次。

setTimeout(function() {
  console.log(1);
}, 0);

setTimeout(function() {
  console.log(2);
  promise.then(function() {
    console.log(3);
  });
}, 0);

setTimeout(function() {
  console.log(4);
}, 0);

var promise = new Promise(function executor(resolve) {
  resolve();
}).then(function() {
  console.log(5);
});

执行结果: 5 1 2 3 4

micro task 队列会在每个 Task 执行完毕之后检查清空,而这次 event-loop 的新 task 会在下次 event-loop 检测。

node 环境

暂略

参考目录

理解event loop(浏览器环境与nodejs环境) - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客
微任务、宏任务与Event-Loop - 掘金

你可能感兴趣的:(事件循环(event loop))