简单通过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 相关文章推荐
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
简单的网页广告特效实例
Aug 19 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
关于js陀螺仪的理解分析
Apr 11 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
使用js修改客户端注册表的方法
2013/08/09 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python实现决策树
2017/12/21 Python
python实现任意位置文件分割的实例
2018/12/14 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python关于反射的实例代码分享
2020/02/20 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python如何生成xml文件
2020/06/04 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
快餐公司创业计划书
2014/04/29 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫