简单通过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循环都新建了一个匿名函数，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

总结

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

赞 (0)

相关推荐

  • 通过JS运行机制的角度说说作用域

    前言 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围.JS中的作用域.闭包.this机制和原型往往是最难理解的概念之一.笔者将通过几篇文章和大家谈谈自己的理解,希望对大家的学习有一些帮助.如果有什么理解偏差的地方,希望大家可以评论指出,相互学习. 有过一定编程经验的同学,一定不会对作用域感到陌生,在C/C++/Java中等语言中,作用域从来没有JavaScript中的作用域那样令人困惑以致于成为一个大多数JS开发者都难以跨过的门槛. 作用域形成机制 JS中存在的三种

  • 漫谈JS引擎的运行机制 你应该知道什么

    javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1; //定义一个全局变量 x function A(y){ var x = 2; //

  • 详解javascript new的运行机制

    详解javascript new的运行机制

    和其他高级语言一样javascript 中也有new 运算符,我们知道new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 一.认识new运算符 function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = f

  • 如何通过setTimeout理解JS运行机制详解

    如何通过setTimeout理解JS运行机制详解

    序 setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 console.log(1); setTimeout(function () { console.log(2); }, 0); console.log(3); 问:最后的打印顺序是什么?(如果不了解js的运行机制就会答错) 正确答案:1 3 2 解析:无论setTimeout的执行时间是0还是1000,结果都是先输出3后输出2,这就是面试官常常

  • javascript运行机制之this详细介绍

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况:1. 纯函数2. 对象方法调用3. 使用new调用构造函数4. 内部函数5. 使用call / apply 6.事件绑定 1. 纯函数 复制代码 代码如下: var name = 'this is window';  //定义window的name属性  f

  • JavaScript运行机制之事件循环(Event Loop)详解

    JavaScript运行机制之事件循环(Event Loop)详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

  • 简单通过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){}

  • JavaScript 运行机制详解再浅谈Event Loop

    JavaScript 运行机制详解再浅谈Event Loop

    目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线

  • JavaScript运行机制实例分析

    本文实例讲述了JavaScript运行机制.分享给大家供大家参考,具体如下: 第一次写博客 目前研一第二学期,大二开始入门前端,然而长久以来都是对于框架的简单调用,并未对其进行深入研究,因此,这个博客是作为自我督促的开始.这篇博客的内容源于前段时间写一个微信小程序前端,发现页面的渲染顺序总与自己的预想相违背,因此近期看了一些关于JavaScript运行机制的博客及文档,有了一些基本的框架,接下来就来详细看一下我所了解到的内容. JavaScript执行顺序 首先,JavaScript是按照顺序,

  • javascript运行机制之执行顺序理解

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:       1.代码块 JavaScript中的代码块是指由<script>

  • Javascript运行机制之Event Loop

    Javascript运行机制之Event Loop

    目录 一.四个概念 1.Javascript是单线程 2.任务队列 3.同步任务.异步任务 4.Javascript执行栈 二.Event Loop 三.实战 一.四个概念 1.Javascript是单线程 单线程意味着我们的js代码只能从上往下同步执行,同一时间只能执行一个任务,这会导致某些执行时间较长或者执行时间不确定的任务会卡住其它任务的正常执行,Event Loop出现的原因正是为了解决此问题. 2.任务队列 为了解决上述的排队问题,有了任务队列,浏览器在异步任务有了结果后,将其添加到任

  • 一篇文章学会jsBridge的运行机制

    目录 js调用方式 安卓 1.js调用原生 2.原生调用js ios 总结 我司的APP是一个典型的混合开发APP,内嵌的都是前端页面,前端页面要做到和原生的效果相似,就避免不了调用一些原生的方法,jsBridge就是js和原生通信的桥梁,本文不讲概念性的东西,而是通过分析一下我司项目中的jsBridge源码,来从前端角度大概了解一下它是怎么实现的. js调用方式 先来看一下,js是怎么来调用某个原生方法的,首先初始化的时候会调用window.WebViewJavascriptBridge.in

  • JavaScript 垃圾回收机制分析

    在公司经常会听到大牛们讨论时说道内存泄露神马的,每每都惊羡不已,最近精力主要用在了Web 开发上,读了一下<JavaScript高级程序设计>(书名很唬人,实际作者写的特别好,由浅入深)了解了一下JavaScript垃圾回收机制,对内存泄露有了一定的认识. 和C#.Java一样JavaScript有自动垃圾回收机制,也就是说执行环境会负责管理代码执行过程中使用的内存,在开发过程中就无需考虑内存分配及无用内存的回收问题了.JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其

随机推荐