EventLoop

1|0概述

Event Loop，即事件循环，是一种计算机运行机制。

JavaScript 引用 Event Loop 这一机制来解决自身单线程的一些问题。

JavaScript 定位是浏览器的脚本语言，主要用来做交互操作。

为了避免复杂性，JavaScript 从诞生开始就一直是单线程。

2|0同步与异步

由于 JavaScript 是单线程，这意味着所有任务都必须排队挨个进行，当前一个任务执行完毕时，后一个任务才能开始执行。

2|1同步:任务直接执行，执行完成后移除任务

如死循环的代码，alert，prompt 将会造成后面代码执行的阻塞。

2|2异步:向系统发送出指令，待该任务满足执行条件后注册到任务队列中

如 ajax 请求，其结果当前不可预期，又不能因之造成阻塞。发送请求后，后续任务继续执行，待请求响应后，其回调函数将排列进任务队列中。

3|0执行栈与任务队列

执行栈:在 JavaScript 主线程中，当主线内的任务被清空后，将从任务队列中取进任务。
任务队列:线性列表数据，存储待执行的任务。

4|0宏任务与微任务

宏任务（MacroTask）

script
setTimeout
setInterval
setImmediate
I/O
UI Render

微任务（MicroTask）

process.nextTick（nodejs）
Promise
Object.observe
MutationObserver

5|0执行顺序（浏览器中）

任务进入执行栈
同步任务立即执行，执行完毕移出执行站。异步任务等待响应，响应后进入任务队列
当任务队列清空后，若有可执行的微任务便将排入执行栈中，如无则将宏任务排入执行栈
下一次任务循环

6|0例子

setTimeout(() => {
  console.log('setTimeout 1');
  new Promise((resolve, reject) => {
    console.log('promise 1');
    resolve();
  }).then(() => {
      console.log('promise then 1');
    }).then(() => {
      console.log('promise then 2');
    });
  console.log('setTimeout 2');
}, 0);

console.log('script 1');

setTimeout(() => {
  console.log('setTimeout 3');
}, 0);

console.log('script 2');

//执行结果:
// script 1
// script 2
// setTimeout 1
// promise 1
// setTimeout 2
// promise then 1
// promise then 2
// setTimeout 3

__EOF__

本文作者：Odyssey
本文链接：https://www.cnblogs.com/qingzhao/p/16546211.html
关于博主：I am a good person
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！