前端基础 | JS异步执行机制——事件循环（Event Loop）

发表于 阅读次数：

JS异步执行机制——事件循环（Event Loop）

先祭出一段代码，你清楚它的输出结果吗

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');
点击查看答案 
1
2
3
4
5
`script start`
 `script end`
 `promise1`
 `promise2`
 `setTimeout`

要想知道为什么输出这样的结果，就得弄明白事件循环(Event loop)是如何处理任务(tasks)和微任务(microtasks)的。「还有种说法叫 宏任务 和 微任务」

科普：js是单线程语言，所有任务只能在一个线程上完成，一次只能做一件事，在前面任务没有完成时，后面的任务只能排队。(Web Worker的作用是为 js 创建)多线程环境。

建议阅读本篇文章了解详情：tasks-microtasks-queues-and-schedules

有时间（虽然你会说没时间，但还是建议抽时间慢慢看看这一篇）建议阅读下:HTML Standard

尝试着翻译了下，无奈英语太渣，翻译出内容自己都看着别扭。读原文自己还能理解其大概意思。

下面的代码，你又知道输出结果是什么吗？

1
2
3
<div class="outer">
  <div class="inner"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

// Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
  console.log('mutate');
}).observe(outer, {
  attributes: true
});

// Here's a click listener…
function onClick() {
  console.log('click');

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

  Promise.resolve().then(function() {
    console.log('promise');
  });

  outer.setAttribute('data-random', Math.random());
}

// …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

有个小视频90秒快速解答上面的答案「视频没有解说！放心观看」:https://www.bilibili.com/video/BV18T4y1G7hx/