简单通过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几个验证函数代码
Mar 25 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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验证码类(分享)
2013/08/06 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
JS实现时间格式化的方式汇总
2013/10/16 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
JAVA代码查错题
2014/10/10 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014年药房工作总结
2014/11/22 职场文书
升学宴家长答谢词
2015/09/29 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
使用Redis实现实时排行榜功能
2021/07/02 Redis