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

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

本文首发地址：

前端基础 | JS异步执行机制--事件循环（Event Loop）​www.brandhuang.com

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

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');
           

点击查看答案

`script start`
  `script end`
  `promise1`
  `promise2`
  `setTimeout`
           

要想知道为什么输出这样的结果，就得弄明白

事件循环(Event loop)

是如何处理

任务(tasks)

和

微任务(microtasks)

的。「还有种说法叫

宏任务

和

微任务

」

科普：

js是单线程语言

，所有任务只能在一个线程上完成，一次只能做一件事，在前面任务没有完成时，后面的任务只能排队。(

Web Worker

的作用是为

js

创建)多线程环境。

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

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

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

<div class="outer">
  <div class="inner"></div>
</div>
// 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秒快速解答上面的答案「

视频没有解说！放心观看

」

JS异步执行机制——事件循环（Evenhttps://www.zhihu.com/video/1232097209866551296