同步、异步、回调执行顺序之经典闭包setTimeout分析

聊聊同步、异步和回调

同步,异步,回调,我们傻傻分不清楚,

有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”。小T微笑着答应了,眼角却滑过一丝不易觉察的杀意。

世界上的所有事情大致可以分为同步去做和异步去做两种。你打电话去订酒店,电话另一边的工作人员需要查下他们的管理系统才能告诉你有没有房间。

这时候你有两种选择:一种是不挂电话一直等待,直到工作人员查到为止(可能几分钟也可能几个小时,取决于他们的办事效率),这就是同步的。

另一种是工作人员问了你的联系方式就挂断了电话,等他们查到之后再通知你,这就是异步的,这时候你就可以干点其他事情,比如把机票也定了之类的

 计算机世界也是如此,我们写的代码需要交给cpu去处理,这时候就有同步和异步两种选择

js是单线程的,如果所有的操作(ajax,获取文件等I/O操作<node>)都是同步的,遇到哪些耗时的操作,后面的程序必然被阻塞而不能执行,页面也就失去了响应,

因此js采用了事件驱动机制,在单线程模型下,使用异步回调函数的方式来实现非阻塞的IO操作,

那么什么是异步任务呢?(参考阮一峰老师《JavaScript运行机制》)

异步任务也就是 指主线程(stack栈)运行的过程中,当stack空闲的时候,主线程对event queque(队列)轮询(事实上一直在轮询)后,将异步任务放到stack里面进行执行;

(上图转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》))

 简单的说,如果我们指定过回调函数,那么当事件发生时就会进入事件队列,等待主线程的(stack)空闲的时候,就会对event queue里面的回调读取并放到stack里面执行

我们经常说的可能是异步回调(当然也有同步回调),所以也就并不难理解,回调和异步之间其实并没有直接的联系,回调只是异步的一种实现方式, 

通过这样的event loop我们其实可以分析出三者的执行顺序,即 同步 > 异步 > 回调

经典闭包setTimeout分析

今天同学问了我一个问题,我一看是一道经典的面试题,问题如下:

简单的这个问题改一下:

1  for (var i = 0; i <= 5; i++) {
2      setTimeout(function() {
3          console.log( i );
4      }, i*1000);
5       console.log( ' i : ' , i );
6  }
7  
8  console.log( i );

相信我们很多人都遇到过这个问题,心中或许都有答案:

那么为什么并不是入门者心中所想要的结果嘞(为什么setTimeout中打印出i全部是6,而且是最后才打印出来呢)?

那么就让我们来梳理一下,第一部分event loop图片很直观的体现:"任务队列"可以放置异步任务的事件,也可以放置定时事件(setTimeout和setinterval),即指定某些代码在多少时间之后执行;

 1、首先我们先来看一下他的主体结构: for循环的第一层是setTimeout函数,setTimeout函数中使用了一个匿名(回调)函数

 2、还记的我们之前总结的执行顺序:同步 > 异步 > 回调 吧!

  1)for循环和外层的 console.log()是同步的,setTimeout是回调执行,

  所以按照执行顺序,先执行for循环,然后进入for循环中,他发现了一个setTimeout()回调(进入event queque事件队列,等待stack栈为空后读取并放入栈中后执行),这时候他并不会等待

  而是继续执行 --> for循环内部的 console.log( ' i : ' , i )  -->  for循环外部的console.log( i ) ,然后"任务队列"中的回调函数才进入到空Stack中开始执行;

 我们在来用这个例子尝试一下上面的event loop图,更加直观的感受一下:

那么接下来可能会问怎么解决这个问题呢?我想最简单的当然是let语法了,

1  for (let i = 0; i <= 5; i++) {
2     setTimeout(function() {
3           console.log( i );
4       }, i*1000);
5       console.log( ' 1 : ' , i );
6   }
7   
8  console.log( i );

我们都知道es5中变量作用域是函数,而es6却可以使用let声明一个具有块级作用域的i,在这里也就是for循环体;

在这里let本质上就是形成了一个闭包,那么写成es5的形式其实等价于:

 1  var loop = function (_i) {
 2      setTimeout(function() {
 3          console.log( _i);
 4      }, _i*1000);
 5      console.log('2:',_i)   6  };  7   8   for (var _i = 0; _i <= 5; _i++) {   9       loop(_i); 10  }

 总结

到这里,我们就完成了从同步、异步、回调的机制分析 到 setTimeout的经典案例的分析,JavaScript博大精深,我们需要了解他的机制去深入去挖掘他。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏醒者呆

精雕细琢——全方位解析工厂模式

工厂模式是面向对象设计模式中非常重要,非常流行的模式,是应该首先被理解透彻的模式。 我们讲对象的相关职责包括: 对象本身的职责(数据和行为) 创建对象的职责 使...

2756
来自专栏Java编程

Java进阶之路——从初级程序员到架构师,从小工到专家

怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序员也是工作三五年之...

7771
来自专栏difcareer的技术笔记

android6.0系统Healthd深入分析[转载]

概述 Healthd是android4.4之后提出来的一种中介模型,该模型向下监听来自底层的电池事件,向上传递电池数据信息给Framework层的Batter...

791
来自专栏撸码那些事

【抽象那些事】不完整的抽象&多方面抽象&未用的抽象&重复的抽象

一种重要的抽象实现手法是创建内聚而完整的抽象。抽象未支持相关的方法时,可能会影响抽象的内聚性和完整性。如果抽象只支持部分相关的方法,其使用者就可能不得不自己去实...

1649
来自专栏大宽宽的碎碎念

The Myth of volatileJDK1.5之前的volatileJDK1.5之后的volatilevolatile足够了吗?volatile VS 锁结论

2759
来自专栏Java技术栈

史上最全 BAT 大厂面试题整理!(速度收藏)

2404
来自专栏IT技术精选文摘

排查Java的内存问题

核心要点 排查Java的内存问题可能会非常困难,但是正确的方法和适当的工具能够极大地简化这一过程; Java HotSpot JVM会报告各种OutOfMemo...

5735
来自专栏desperate633

Java程序员秋招面经大合集(BAT美团网易小米华为中兴等)

1, 自我介绍 2, 项目介绍 3, 项目架构 4, 项目难点 5, Synchronize关键字为什么jdk1.5后效率提高了 6, 线...

682
来自专栏微服务生态

由学习《软件设计重构》所想到的代码review(一)

对于一个程序员来讲如何来最直接的来衡量他的技术能力和产出呢?我想最直观的作法是看他的代码编写能力,就拿我经常接触的一些程序员来看,他们买了很多技术重构类书籍,但...

573
来自专栏Java帮帮-微信公众号-技术文章全总结

02.工厂模式/抽象工厂模式

工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在...

2883

扫码关注云+社区