如何通过setTimeout理解JS运行机制详解


Posted in Javascript onMarch 23, 2019


setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数,表示定时器timer的编号,可以用来取消该定时器。

例子

console.log(1);
setTimeout(function () {
 console.log(2);
}, 0);
console.log(3);

问:最后的打印顺序是什么?(如果不了解js的运行机制就会答错)

正确答案:1 3 2

解析:无论setTimeout的执行时间是0还是1000,结果都是先输出3后输出2,这就是面试官常常考查的js运行机制的问题,接下来我们要引入一个概念,JavaScript 是单线程的。

二、 JavaScript 单线程

JavasScript引擎是基于事件驱动和单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行程序,即主线程。

通俗的说:JS在同一时间内只能做一件事,这也常被称为 “阻塞式执行”。

任务队列

那么单线程的JavasScript是怎么实现“非阻塞执行”呢?

答:异步容易实现非阻塞,所以在JavaScript中对于耗时的操作或者时间不确定的操作,使用异步就成了必然的选择。
诸如事件点击触发回调函数、ajax通信、计时器这种异步处理是如何实现的呢?

答:任务队列

所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。

任务队列:一个先进先出的队列,它里面存放着各种事件和任务。

同步任务

同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。

  • 输出
  • 如:console.log()
  • 变量的声明
  • 同步函数:如果在函数返回的时候,调用者就能够拿到预期的返回值或者看到预期的效果,那么这个函数就是同步的。

异步任务

  • setTimeout和setInterval
  • DOM事件
  • Promise
  • process.nextTick
  • fs.readFile
  • http.get
  • 异步函数:如果在函数返回的时候,调用者还不能够得到预期结果,而是需要在将来通过一定的手段得到,那么这个函数就是异步的。

除此之外,任务队列又分为macro-task(宏任务)与micro-task(微任务),在ES5标准中,它们被分别称为task与job。

宏任务

  1. I/O
  2. setTimeout
  3. setInterval
  4. setImmdiate
  5. requestAnimationFrame

微任务

  1. process.nextTick
  2. Promise
  3. Promise.then
  4. MutationObserver

宏任务和微任务的执行顺序

一次事件循环中,先执行宏任务队列里的一个任务,再把微任务队列里的所有任务执行完毕,再去宏任务队列取下一个宏任务执行。

注:在当前的微任务没有执行完成时,是不会执行下一个宏任务的。

三、setTimeout运行机制

setTimeout 和 setInterval的运行机制是将指定的代码移出本次执行,等到下一轮 Event Loop 时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮 Event Loop 时重新判断。

这意味着,setTimeout指定的代码,必须等到本次执行的所有同步代码都执行完,才会执行。

优先关系:异步任务要挂起,先执行同步任务,同步任务执行完毕才会响应异步任务。

四、进阶

console.log('A');
setTimeout(function () {
 console.log('B');
}, 0);
while (1) {}

大家再猜一下这段程序输出的结果会是什么?

答:A

注:建议先注释掉while循环代码块的代码,执行后强制删除进程,不然会造成“假死”。

同步队列输出A之后,陷入while(true){}的死循环中,异步任务不会被执行。

类似的,有时addEventListener()方法监听点击事件click,用户点了某个按钮会卡死,就是因为当前JS正在处理同步队列,无法将click触发事件放入执行栈,不会执行,出现“假死”。

五、定时获取接口更新数据

for (var i = 0; i < 4; i++) {
 setTimeout(function () {
 console.log(i);
 }, 1000);
}

输出结果为,隔1s后一起输出:4 4 4 4

for循环是一个同步任务,为什么连续输出四个4?

答:因为有队列插入的时间,即使执行时间从1000改成0,还是输出四个4。

那么这个问题是如何产生和解决的呢?请接着阅读

异步队列执行的时间

执行到异步任务的时候,会直接放到异步队列中吗?

答案是不一定的。

因为浏览器有个定时器(timer)模块,定时器到了执行时间才会把异步任务放到异步队列。
for循环体执行的过程中并没有把setTimeout放到异步队列中,只是交给定时器模块了。4个循环体执行速度非常快(不到1毫秒)。定时器到了设置的时间才会把setTimeout语句放到异步队列中。

即使setTimeout设置的执行时间为0毫秒,也按4毫秒算。

这就解释了上题为什么会连续输出四个4的原因。

HTML5 标准规定了setTimeout()的第二个参数的最小值,即最短间隔,不得低于4毫秒。如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。

利用闭包实现 setTimeout 间歇调用

for (let i = 0; i < 4; i++) {
 (function (j) {
 setTimeout(function () {
  console.log(j);
 }, 1000 * i)
 })(i);
}

执行后,会隔1s输出一个值,分别是:0 1 2 3

  • 此方法巧妙利用IIFE声明即执行的函数表达式来解决闭包造成的问题。
  • 将var改为let,使用了ES6语法。

这里也可以用setInterval()方法来实现间歇调用。

详见:setTimeout和setInterval的区别

利用JS中基本类型的参数传递是按值传递的特征实现

var output = function (i) {
 setTimeout(function () {
 console.log(i);

 }, 1000 * i)
}
for (let i = 0; i < 4; i++) {
 output(i);
}

执行后,会隔1s输出一个值,分别是:0 1 2 3

实现原理:传过去的i值被复制了。

基于Promise的解决方案

const tasks = [];

const output = (i) => new Promise((resolve) => {
 setTimeout(() => {
 console.log(i);
 resolve();
 }, 1000 * i);

});

//生成全部的异步操作
for (var i = 0; i < 5; i++) {
 tasks.push(output(i));
}
//同步操作完成后,输出最后的i
Promise.all(tasks).then(() => {
 setTimeout(() => {
 console.log(i);
 }, 1000)
})

执行后,会隔1s输出一个值,分别是:0 1 2 3 4 5

优点:提高了代码的可读性。

注意:如果没有处理Promise的reject,会导致错误被丢进黑洞。

使用ES7中的async await特性的解决方案(推荐)

const sleep = (timeountMS) => new Promise((resolve) => {
 setTimeout(resolve, timeountMS);
});

(async () => { //声明即执行的async
 for (var i = 0; i < 5; i++) {
 await sleep(1000);
 console.log(i);
 }

 await sleep(1000);
 console.log(i);

})();

执行后,会隔1s输出一个值,分别是:0 1 2 3 4 5

六、事件循环 Event Loop

如何通过setTimeout理解JS运行机制详解

主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop。

有时候 setTimeout明明写的延时3秒,实际却5,6秒才执行函数,这又是因为什么?

答:setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

浏览器的JS引擎遇到setTimeout,拿走之后不会立即放入异步队列,同步任务执行之后,timer模块会到设置时间之后放到异步队列中。js引擎发现同步队列中没有要执行的东西了,即运行栈空了就从异步队列中读取,然后放到运行栈中执行。所以setTimeout可能会多了等待线程的时间。

这时setTimeout函数体就变成了运行栈中的执行任务,运行栈空了,再监听异步队列中有没有要执行的任务,如果有就继续执行,如此循环,就叫Event Loop。

七、总结

JavaScript通过事件循环和浏览器各线程协调共同实现异步。同步可以保证顺序一致,但是容易导致阻塞;异步可以解决阻塞问题,但是会改变顺序性。

知识点梳理:

  • 理解JS的单线程的概念:一段时间内做一件事
  • 理解任务队列:同步任务、异步任务
  • 理解 Event Loop
  • 理解哪些语句会放入异步任务队列
  • 理解语句放入异步任务队列的时机

最后,希望大家阅后有所收获。?

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中的面向对象介绍
Jun 30 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
vue中axios请求的封装实例代码
Mar 23 #Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 #Javascript
浅谈Angular单元测试总结
Mar 22 #Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 #Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 #Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 #Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 #Javascript
You might like
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
PHP打印输出函数汇总
2016/08/28 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python实现井字棋游戏
2020/03/30 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python numpy存取文件的方式
2020/04/01 Python
django框架cookie和session用法实例详解
2019/12/10 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
应用数学自荐书范文
2013/11/24 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
火锅店营销方案
2014/02/26 职场文书
移风易俗倡议书
2014/04/15 职场文书
手机被没收的检讨书
2014/10/04 职场文书
实习感想范文
2015/08/10 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
python前后端自定义分页器
2022/04/13 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers