从setTimeout说到事件循环机制(event-loop)-CSDN博客

先说说我们都知道的setTimeout

setTimeout在我们写代码中会经常用到，不管是前端还是服务端，目的是延迟执行。

    setTimeout(() => {
        console.log('延迟执行');
    }，1000);

复制代码

貌似没什么可讲的。

再讲讲我们可能不知道的setTimeout

我们可能遇到这么一个问题：在一段逻辑中，需要执行某段代码，但是怎么也没有效果。最后，在试试看+从网上找的情况下，用了一个setTimeout,神奇的事情发生了，程序能够正确运行。

我写一个具体的我们在实际项目中用到的：

需求是点击某个按钮时弹出一个弹框，然后点击弹框外的任何区域，弹框消失。但点击弹框中的任何地方和元素，弹框不会消失。

<body>
        <button type="button" class="clickBtn">点击我</button>
        <div id="mask">
            <p class="title">提示</p>
            <p>
                <span class="area-content">这是一个弹框</span>
                <a href="javascript:;">跳转</a>
            </p>
        </div>
        <script type="text/javascript">
            document.querySelector('.clickBtn').addEventListener('click', () => {
                document.querySelector('#mask').style.display = 'block';
                setTimeout(() => {
                    window.addEventListener('click', hides, false);
                }, 0);
            });
            function hides(e) {
                document.querySelector('#mask').style.display = 'none';
                window.removeEventListener('click', hides, false);
            }

            document.querySelector('#mask').addEventListener('click', e => {
                e.stopPropagation();
            });
        </script>

    </body>

复制代码

通过上面的写法，利用setTimeout很方便的实现了页面功能，而不需要去通过各种e.target的判断去费力的实现。

上面代码最重要的在于setTimeout(()=>{},0) 这段逻辑。要明白为什么加个setTimeout就能实现，而如果不加，那么弹框就无法正确显示和隐藏，就需要知道一个很重要的概念： event-loop。也就是事件循环机制。

event-loop

事件循环机制其实在网站上也有不少的分析，而且分析的不错。最后我会附上好文章的链接供大家参考。

我在此想从宏观上再提一下event-loop

event-loop在node中和在浏览器中的实现方式不相同。node是通过libuv库来实现，而浏览器是不同的厂商去完成。这里不讨论node，只看浏览器厂商是怎么处理时间循环的。

其中有重点的含义需要清除。既然叫事件循环，那么就说明事件是循环着执行的。一个事件循环有一个或多个任务队列,每一个任务队列里的任务是严格按照先进先出的顺序执行的，但是不同任务队列的任务的执行顺序是不确定的。

那么哪些行为属于task或者microtask呢？标准没有阐述，但各种技术文章总结都如下(不包含node)：

macrotasks script(整体代码), setTimeout, setInterval,
microtasks Promise

『下面的这个模型阐述来源自参考资料~~』

看一下标准阐述的事件循环的进程模型：

1.选择当前要执行的任务队列，选择一个最先进入任务队列的任务，如果没有任务可以选择，则会跳转至microtask的执行步骤。

2.将事件循环的当前运行任务设置为已选择的任务。

3.运行任务。

4.将事件循环的当前运行任务设置为null。将运行完的任务从任务队列中移除。

5.microtasks步骤：进入microtask检查点（performing a microtask checkpoint ）。

6.更新界面渲染。

7.返回第一步。

执行进入microtask检查点时，用户代理会执行以下步骤：

设置进入microtask检查点的标志为true。

当事件循环的微任务队列不为空时：选择一个最先进入microtask队列的microtask；设置事件循环的当前运行任务为已选择的microtask；运行microtask；设置事件循环的当前运行任务为null；将运行结束的microtask从microtask队列中移除。

对于相应事件循环的每个环境设置对象（environment settings object）,通知它们哪些promise为rejected。

清理indexedDB的事务。

设置进入microtask检查点的标志为false。

那么该举个例子了，上面的知识确实有些难懂。

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');
复制代码

当然，如果你测试的浏览器支持的Promise不支持Promise/A+标准，或是你使用了其他Promise polyfill，运行结果可能有差异。

运行结果是：

script start
script end
promise1
promise2
setTimeout
复制代码

具体的解释步骤在后面附的链接中有详细的解读，我就不再啰嗦了。知识想强调一下整个事件循环：

第一个事件循环里，只有一个任务，就是js的加载 -> 把setTimeout和promise分别放入macrotasks和microtask中 ->js执行完后，进入下一个事件循环 -> 执行microtask任务队列中的所有任务 -> 执行macrotasks中的所有任务 -> 完成，继续下一个事件循环（如果有的话）

现在再回过头来看刚开始我写的那个弹框的例子，就能知道为什么setTimeout隔0秒以后执行，也能实现需求了。根本原因就是因为setTimeout是一个task，需要在下一个时间周期执行。

在本文的最后，我想再说一下setTimeout的一个小特点，那就是：写着几秒后执行的，不一定会几秒后一定执行喔~~

举个例子：

setTimeout(() => {
	console.time('testForEach');
    for(let i = 0; i < 100000000; i++) {
        
    }
}, 0);

setTimeout(() => {
    console.timeEnd('testForEach')
},1);

// testForEach: 65.606201171875ms
复制代码

通过上面的例子可以看出，虽然想让第二个setTimeout中的程序在1ms后执行，但是结果却是在65ms后才执行。