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

 更新时间:2019年05月10日 14:40:09   作者:aaron_lawliet   我要评论
这篇文章主要给大家介绍了关于如何通过settimeout看javascript的运行机制的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

我们知道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解析json实例详解

    javascript解析json实例详解

    这篇文章主要介绍了javascript解析json的方法,以实例形式详细讲述了javascript的json库用法,需要的朋友可以参考下
    2014-11-11
  • JavaScript变量声明详解

    JavaScript变量声明详解

    本文详细向大家介绍了javascript变量声明,并通过示例进行了具体分析,是篇非常不错的文章,这里推荐给刚入门的jser。
    2014-11-11
  • 谈谈对offsetleft兼容性的理解

    谈谈对offsetleft兼容性的理解

    offsetleft属性具有一定的兼容性问题,在IE7浏览器中,它的返回值是相对于最近的父类元素的左侧的距离,本文通过代码示例给大家介绍offsetleft兼容性问题,小伙伴们一起看看吧
    2015-11-11
  • 原生javascript和jquery判断浏览器版本等信息

    原生javascript和jquery判断浏览器版本等信息

    本文为大家详细介绍下通过jquery和原生javascript判断浏览器信息包括:判断浏览器是否为IE以及IE版本是多少等等,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • JS实现自定义弹窗功能

    JS实现自定义弹窗功能

    浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。下面小编给大家带来了JS实现自定义弹窗,感兴趣的朋友一起看看吧
    2018-08-08
  • 微信小程序按钮去除边框线分享页面功能

    微信小程序按钮去除边框线分享页面功能

    这篇文章主要介绍了微信小程序按钮去除边框线分享页面功能,文中通过一段简单的代码给大家介绍了微信小程序的button去边框的方法,感兴趣的朋友跟随澳门金沙网上娱乐小编一起看看吧
    2018-08-08
  • 正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)

    正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,

    这篇文章主要是对正则表达式中特殊符号及正则表达式的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript实现ASC转汉字及汉字转ASC的方法

    JavaScript实现ASC转汉字及汉字转ASC的方法

    这篇文章主要介绍了JavaScript实现ASC转汉字及汉字转ASC的方法,涉及JavaScript编码转换的相关技巧,需要的朋友可以参考下
    2016-01-01
  • React父子组件间的传值的方法

    React父子组件间的传值的方法

    在单页面里面,父子组件传值是比较常见的,这篇文章主要介绍了React父子组件间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • js中鼠标滚轮事件详解(firefox多浏览器)

    js中鼠标滚轮事件详解(firefox多浏览器)

    之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题
    2010-02-02

最新评论