简单通过settimeout看javascript的运行机制


Posted in Javascript onMay 10, 2019

前言

我们知道JS是一个单线程的语言,而且其运行机制比较特殊。

下面我们通过settimeout的几个示例来展现javascript的运行机制的特殊点

示例1

console.log(1);
setTimeout(function(){
 console.log(2);
},0);
console.log(3);
// 打印出 1 3 2

示例2

console.log('1');
setTimeout(function(){
 console.log('2');
},0);
while(1){}
// 打印出1,然后浏览器卡死,不会打印出2

javascript会先把需要运行的内容放到任务队列中

但是如果遇到settimeout,会认为这是个异步任务,会先放到异步队列中

浏览器会先执行同步任务,等到同步任务执行完之后,再查看异步队列

如果异步队列中的任务的执行时机到了,浏览器就会把任务放到同步队列中去。

即:

异步任务一定在同步任务之后执行。

示例3

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

为什么打印出的是4 4 4 4呢?

因为浏览器会先执行for循环

每执行一次for循环,都把一个settimeout压入异步队列

1000毫秒之后,执行settimeout里的方法的时候,i的值已经是4了。

如果要打印0 1 2 3怎么办呢?

利用闭包的特性,把i缓存到一个temp值里

for(var i = 0; i < 4; i++){
 (function(temp){
  setTimeout(function() {
   console.log(temp);
  }, 1000);
 })(i);
}
// 打印 0 1 2 3

这样做等于是每一次for循环都新建了一个匿名函数,i的值被存入了这个匿名函数的内存里。

理解了闭包的同学一定可以理解这一点。

示例4

我们知道ES6引入了新的关键字let

在这里,let有一个新的特性

for(let i = 0; i < 4; i ++){
 setTimeout(function(){
  console.log(i); 
 }, 1000);
}
// 打印 0 1 2 3

示例4与示例3只有var和let这个地方有区别,但是打印出来的结果却完全不同

这是因为let是一个块级作用域

let定义的i,对于每一个for循环的执行来说都是一个全新的i(使用不同的内存地址)

所以打印的时候可以得到0 1 2 3

总结

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

Javascript 相关文章推荐
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
javascript使用call调用微信API
Dec 15 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
详解js实时获取并显示当前时间的方法
May 10 #Javascript
JS获取本地地址及天气的方法实例小结
May 10 #Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 #Javascript
vue无限轮播插件代码实例
May 10 #Javascript
js中的深浅拷贝问题简析
May 10 #Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 #Javascript
详解jQuery如何实现模糊搜索
May 10 #jQuery
You might like
PHP与Java进行通信的实现方法
2013/10/21 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
PHP实现的购物车类实例
2015/06/17 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
基于Python的PIL库学习详解
2019/05/10 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
专业技术职务聘任书
2014/03/29 职场文书
努力学习演讲稿
2014/05/10 职场文书
2014年收银工作总结
2014/11/13 职场文书
人才市场接收函
2015/01/30 职场文书