JS事件循环机制

原创已于 2022-03-23 20:42:16 修改 · 689 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-02-27 21:53:06 首次发布

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文详细解析了HTML页面中点击事件的冒泡和捕获机制，以及JavaScript的EventLoop在事件处理中的作用，包括宏任务和微任务的执行顺序。通过实例演示，解释了如何理解事件循环的工作原理和代码执行流程。

前言

先上面试题：

<div class="grandma">奶奶
    <div class="mother">妈妈
        <div class="daughter">女儿
            <div class="baby">婴儿</div>
        </div>
    </div>
</div>
<script>
    var grandma = document.getElementsByClassName("grandma")[0];
    var mother = document.getElementsByClassName("mother")[0];
    var daughter = document.getElementsByClassName("daughter")[0];
    var baby = document.getElementsByClassName("baby")[0];

    baby.addEventListener("click", () => { console.log("I'm baby") }, false);
    daughter.addEventListener("click", () => { console.log("I'm daughter") }, true);
    mother.addEventListener("click", () => { console.log("I'm mother") }, true);
    grandma.onclick = () => { console.log("I'm grandma") };
</script>

根据如上代码，页面上点击baby之后，控制台会打印什么？

捕获和冒泡

上面这道题，每个dom上有不同的事件处理程序，就代表着有不同的事件流。考察的就是事件捕获和冒泡的执行流程问题，addEventListener(type, listener, useCapture)接受三个参数：

type：监听的事件类型字符串
listener：函数
useCapture：布尔值，默认false代表冒泡，true代表捕获

因此，就可知道很简单的标注一下每种事件处理程序的事件流：

// 冒泡
baby.addEventListener("click", () => { console.log("I'm baby") }, false);
// 捕获
daughter.addEventListener("click", () => { console.log("I'm daughter") }, true);
// 捕获
mother.addEventListener("click", () => { console.log("I'm mother") }, true);
// 冒泡
grandma.onclick = () => { console.log("I'm grandma") };

在页面中点击一个div，事件流的过程如下图就能形象阐述：
在这里插入图片描述
从中也可以看出，事件捕获是优先于事件冒泡的，所以是先触发事件捕获，捕获流程是从最外层向最内层触发。因此可以确定，第一个触发mother，然后触发daughter。

事件冒泡则相反，由最内层向最外层触发，所以能确定，先触发baby，再触发grandma。

最后，结果就是1. mother，2. daughter，3. baby， 4. grandma

Event Loop

既然是讲事件这块知识的，怎能不提这个面试常考点呢。

理论派请问，说一下事件循环机制的原理。

实战派请问，如下这段代码的执行结果：

console.log("小红");
setTimeout(() => {
    console.log("小白");
}, 0)
console.log("小黄");

下面详述这段代码的执行流程，先确定几个东西：

控制台：代码最终执行结果输出在这儿
调用栈（Call Stack）：LIFO（后进先出）结构，主要用来保存调用的返回地址
Web APIs
回调函数队列（Callback Queue）：FIFO（先进先出）结构，

现在按照代码执行顺序走一遍大白话：

第一步

JS代码是顺序执行，先走到console.log("小红");这儿，这时候会将这段代码放进调用栈，在这个地方去执行代码，这个代码就是打印一个小红，输出结果显示在控制台。这段代码执行完成，就会从调用栈里移除。

第二步

代码走到了setTimeout这儿，就将这一整块的代码放进调用栈执行代码，setTimeout是一个Web API，它的意思是0秒之后执行里面的回调函数。但是这一整块的代码此时在调用栈里是执行完毕，也就会从调用栈中移除。

第三步

代码来到console.log("小黄")，代码放进调用栈执行，打印小黄，在控制台输出结果，代码执行完毕，调用栈移除代码。

至此，所有的同步代码已经执行完毕。

第二步的后续完善

这时候，Event Loop登场，它不断循环回调函数队列，去寻找是否存在一些异步任务执行完后的回调函数，需要去执行。

在0秒以后，Web APIs里setTimeout就会把它里面的回调函数放入Callback Queue，Event Loop再去循环时发现了有待执行的回调函数，而且此时调用栈里是空的，Event Loop就会将找到的回调函数推入调用栈，来执行函数代码。

这个回调函数里console.log("小白");需要执行时，也是将这段代码放入调用栈，此时根据调用栈的LIFO结构，后入的代码先执行，打印小白，在控制台输出结果，代码执行完毕，调用栈移除这段代码。此时调用栈里还剩回调函数代码，但函数也执行完了，也从栈里移除。

总结

总结来说event loop的循环过程:

在宏任务队列（tasks队列）中选择最老的一个task，用户代理可以选择任何task队列，如果没有可选的任务，则跳到下边的微任务（microtasks）步骤。
将上边选择的task设置为正在运行的task。
Run: 运行被选择的task。
将event loop的currently running task变为null。
从task队列里移除之前运行的task。
Microtasks：执行microtasks任务检查点（也就是执行microtasks队列里的任务）。
更新渲染（Update the rendering）
返回到第一步。

注意

这题的迷惑点可能是那个0秒，如果换成3秒可能也会蒙对。其实只需要记住的是，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，顺便说一下，Promise.resolve()在本轮“事件循环”结束时执行，这就涉及到宏任务和微任务的知识点了。

任务

在JS中，任务被分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）。

宏任务

一个event loop有一个或者多个task队列，当用户代理安排一个任务，必须将该任务增加到相应的event loop的一个tsak队列中，每一个task都来源于指定的任务源，比如可以为鼠标、键盘事件提供一个task队列，其他事件又是一个单独的队列。可以为鼠标、键盘事件分配更多的时间，保证交互的流畅。

譬如setTimeout，setInterval，DOM事件，AJAX请求都是宏任务。

微任务

每一个event loop都有一个microtask队列，一个microtask会被排进microtask队列而不是task队列。

譬如Promise，async/await都是微任务。

看下面这段代码，输出的结果是什么？

console.log(1);
setTimeout(() => {
    console.log(2)
}, 0)
Promise.resolve().then(() => {
    console.log(3)
})
console.log(4)

1和4是同步代码，先输出打印，2和3是异步代码会后打印。

微任务的执行时机比宏任务早，所以3比2先打印。

再来个复杂点的题，如下代码会输出什么结果：

console.log('script start');
setTimeout(function() {
  console.log('timeout1');
}, 10);
new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})
console.log('script end');