当前位置: 首页 > 编程笔记 >

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

葛泳
2023-03-14
本文向大家介绍简单通过settimeout看javascript的运行机制,包括了简单通过settimeout看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循环都新建了一个匿名html" target="_blank">函数,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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍请解释下setTimeout的运行机制相关面试题,主要包含被问及请解释下setTimeout的运行机制时的应答技巧和注意事项,需要的朋友参考一下 setTimeout()是异步方法,其内部的代码,要等到本次执行的所有同步代码执行完以后,才会执行。js代码自上而下逐行执行,当执行到setTimeout()时,会将其挂起,设置的延时结束后,会把setTimeout()放入任务队列中,当执

  • 我正在使用Linux-Ubuntu14.04。我安装了詹金斯2.7.2。 我在Eclipse中创建了一个maven项目,并遵循了此链接中提供的说明http://www.guru99.com/maven-jenkins-with-selenium-complete-tutorial.html. 在完成项目设置后,我将其作为Maven项目执行,构建成功。 然后我安装了Jenkins,安装了Maven集

  • 本文向大家介绍详解javascript new的运行机制,包括了详解javascript new的运行机制的使用技巧和注意事项,需要的朋友参考一下 和其他高级语言一样javascript 中也有new 运算符,我们知道new 运算符是用来实例化一个类,从而在内存中分配一个实例对象。 但在 javascript 中,万物皆对象,为什么还要通过new 来产生对象? 本文将带你一起来探索 javascr

  • 本文向大家介绍通过JS运行机制的角度说说作用域,包括了通过JS运行机制的角度说说作用域的使用技巧和注意事项,需要的朋友参考一下 前言 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围。JS中的作用域、闭包、this机制和原型往往是最难理解的概念之一。笔者将通过几篇文章和大家谈谈自己的理解,希望对大家的学习有一些帮助。如果有什么理解偏差的地方,希望大家可以评论指出,相互学

  • 我不熟悉编程和Android,这是我第一次尝试编程一个应用程序,但我已经无法登录了。登录必须与服务器连接,在get请求的帮助下,我将获得json数据,我可以使用它来验证登录数据(用户名)。允许使用该应用程序的人员已在数据库中。这应该很简单。在这个论坛中,我只能找到使用等的解决方案,但仅使用已不再有效。我使用了LoginActivity模板 这是我的代码(我也没有使用JSON数据的经验)。这是我们的

  • 问题内容: 在我们的团队中,我们定义了大多数测试用例,如下所示: 一门“框架”课: 还有很多测试用例,例如testMyCase.py: 当我编写新的测试代码并希望经常运行它并节省时间时,我要做的是在所有其他测试之前放置“ __”。但这很麻烦,使我从正在编写的代码中分散了注意力,并且由此产生的提交噪音实在令人讨厌。 因此,例如,当对进行更改时,我希望能够做到这一点: 并运行 只 我该如何实现? 我尝