简单通过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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
JavaScript继承方式实例
Oct 29 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
详解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
什么是MVC,好东西啊
2007/05/03 PHP
实用函数5
2007/11/08 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript简介
2015/02/15 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python类中self参数用法详解
2020/02/13 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
社区工作感言
2014/02/21 职场文书
承诺书格式
2014/06/03 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android