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

Posted 2021-04-30 九零后重庆崽儿

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

先别往下滑看答案！！！

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

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

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

这里给出---答案

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

建议阅读本篇文章了解详情：https://jakearchibald.com/2015/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秒快速解答上面的答案「视频没有解说！放心观看」

微信搜索「九零后重庆崽儿」

或

扫码关注获取更多

如果喜欢这篇文章

就点下「在看」哦