JavaScript 的setTimeout与事件循环机制event-loop
目录
- 1.先说说我们都知道的setTimeout
- 2.再讲讲我们可能不知道的setTimeout
- event-loop
- 3. node中的时间循环执行顺序
- 4. 关于事件循环中的promise
1.先说说我们都知道的setTimeout
setTimeout在我们写代码中会经常用到，不管是前端还是服务端，目的是延迟执行。
setTimeout(() => {
console.log('延迟执行');
}，1000);
貌似没什么可讲的。
2.再讲讲我们可能不知道的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:;" rel="external nofollow" >跳转</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)：
macrotasksscript(整体代码), setTimeout, setInterval,microtasksPromise
看一下标准阐述的事件循环的进程模型：
- 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中的一个任务，当前宏任务执行完毕后 -> 如果此时微任务队列不为空，则重新执行所有微任务,如果微任务为空，则执行下一个macroTask -> 完成，继续下一个事件循环
现在再回过头来看刚开始我写的那个弹框的例子，就能知道为什么setTimeout隔0秒以后执行，也能实现需求了。根本原因就是因为setTimeout是一个task，需要在下一个时间周期执行。
setTimeout(() => {
console.log(1);
},0)
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => console.log('promise1'));
Promise.resolve().then(() => console.log('promise2'));
}, 0)
setTimeout(() => {
console.log(3);
}, 0)
执行结果是：
1
2
promise1
promise2
3
3. node中的时间循环执行顺序
node中的事件循环，总体上说，在node9之前，它的实现跟浏览器是不一样的，就相同api的部分来说，宏任务的执行会有区别，比如说同样是上面的这个例子， 在node 8.x中执行，顺序是这样的：
1
2
3
promise1
promise2
在node高版本中，跟浏览器的特性进行了对齐。所以在真正上线的时候，如果有线上编译的情况，一定要注意node的版本，小心这些坑。
4. 关于事件循环中的promise
setTimeout比较简单，也比较直接，我们还容易理解和使用。 但是当遇到promise的时候，会有些难度，可能如果只涉及简单的场景，promise倒是也会使用，无非就是 new Promise((resolve, reject)).then() 但是，当遇到复杂场景的时候，其实是会有坑，如果不真正了解原理，是容易掉坑里的。
到此这篇关于JavaScript 的setTimeout与事件循环机制event-loop的文章就介绍到这了,更多相关JS setTimeout内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript setTimeout与setTimeinterval使用案例详解
这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-
-
一文详解JS中的事件循环机制
目录 前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环 前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在
-
JS关于for循环中使用setTimeout的四种解决方案
目录 概述 解决方案1:闭包 解决方案2:拆分结构 解决方案3:let 解决方案4:setTimeout第三个参数 概述 我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此若是这样将不会得到想要的结果输出1.2.3.4.5,而会连续输出5个6. for (var i=1; i<=5; i++) { setTimeout( function time
-
JavaScript setTimeout()基本用法有哪些
在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 js 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为单位) setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout() setTimeout()用法 举个简单的例子 加入下列代码,在打开的页面静候三秒后,弹出警告框"你好" <
-
javascript的setTimeout()使用方法总结
目录 1.前言 2.setInterval与setTimeout的区别 3.setTimeout 4.setTimeout的用法 5.clearTimeout( ) 6.结尾 1.前言 js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. 2
-
JS promise 的回调和 setTimeout 的回调到底谁先执行
目录 任务 VS 微任务 执行过程 案例分析 结语 & 参考资料 首先提一个小问题:运行下面这段 JS 代码后控制台的输出是什么? console.log("script start"); setTimeout(function () { console.log("setTimeout1"); }, 0); new Promise((resolve, reject) => { setTimeout(function () { console.log(&
-
JavaScript使用setTimeout实现倒计时效果
为了加强对JavaScript原生代码的编写能力,以及巩固setTimeout()的使用方法,制作了一个倒计时的demo,倒计时在现在的网站中算是一个常见的小功能,如果大家喜欢的话可以留下,就当作一个日常实用的小脚本. 实现思路 1.先获取小时值 将小时值减1开始进行倒计时 分钟59 秒数59 2.秒数的个位从9开始递减,当秒数个位小于0时,秒数的十位减1 3.秒数的十位小于0时,分钟的个位减1 4.分钟的个位小于0时,分钟的十位减1 5.分钟的十位小于0时,小时减1 6.小时数小于0后停止计时
-
JavaScript 的setTimeout与事件循环机制event-loop
目录 1.先说说我们都知道的setTimeout 2.再讲讲我们可能不知道的setTimeout event-loop 3. node中的时间循环执行顺序 4. 关于事件循环中的promise 1.先说说我们都知道的setTimeout setTimeout在我们写代码中会经常用到,不管是前端还是服务端,目的是延迟执行. setTimeout(() => { console.log('延迟执行'); },1000); 貌似没什么可讲的. 2.再讲讲我们可能不知道的setTimeout 我们可能遇
-
JS事件循环机制event loop宏任务微任务原理解析
首先看一段代码 async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2') 正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器 为什么会出现这样打印顺序呢 首先javascript是一门单线程语言,在最新的
-
Node.js事件循环（Event Loop）和线程池详解
Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件
-
实例分析js事件循环机制
本文通过实例给大家详细分析了JS中事件循环机制的原理和用法,以下是全部内容: var start = new Date() setTimeout(function () { var end = new Date console.log('Time elapsed:', end - start, 'ms') }, 500) while (new Date() - start < 1000) { } 有其他语言能完成预期的功能吗?Java, 在Java.util.Timer中,对于定时任务的解决方案
-
详解JavaScript事件循环机制
众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There a
-
深入了解Javascript的事件循环机制
目录 单线程的Javascript 同步 vs 异步 宏任务 vs 微任务 定时器 To Be Continued 单线程的Javascript JavaScript是一种单线程语言,它主要用来与用户互动,以及操作DOM.多线程需要共享资源.且有可能修改彼此的运行结果,且存在上下文切换. 在 JS 运行的时候可能会阻止 UI 渲染,这说明两个线程是互斥的.这是因为 JS 可以修改 DOM,如果在 JS 执行的时候 UI 线程还在工作,就可能导致不能安全的渲染 UI. JS 是单线程运行的,可以达
-
JavaScript 关于事件循环机制的刨析
目录 前言: 一.事件循环和任务队列产生的原因: 二.事件循环机制: 三.任务队列: 3.1 任务队列的类型: 3.2 两者区别: 3.3 更细致的事件循环过程 四.强大的异步专家 process.nextTick() 4.1 process.nextTick()在何时调用? 前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS是单线程,这样设计也是
-
简单聊聊JavaScript的事件循环机制
目录 前言 概念 举个栗子 TIP 再次举个栗子 总结 前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在JavaScript代码执行过程中,可以分为同步队列和异步队列. 同步任务类似我们常说的立即执行函数,不需要等待可以直接进行,可以直接进入到主线程中去执行,类似正常的函数调用等. 异步队列则是异步执行函数,类似ajax请求,我们在发起的过程中,
-
详解JS浏览器事件循环机制
先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的. 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种. 浏览器内核有多种线程在工作. GUI 渲染线程: 负责渲染页面,解析 HTML,C