简单通过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 关键字屏蔽实现函数
Aug 02 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 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分页函数代码(简单实用型)
2010/12/02 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python爬虫基本知识
2018/03/05 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Django 路由控制的实现
2019/07/17 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
岗位职责的含义
2013/11/17 职场文书
大四本科生的自我评价
2013/12/30 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技