单线程 JavaScript 的异步机制与经典 for 循环面试题

Bertha 。 2022-05-30 07:27 221阅读 0赞

# 从一个经典的 for 循环问题开始 #

for (var i = 1; i <= 5; i++) { setTimeout( function timer() { console.log(i); }, i*1000)
    }

输出是：每隔1秒，输出一个6，共5次。

# 原理 #

这样的输出，是由 JavaScript 的单线程及异步机制决定的。

JavaScript 是单线程的，所有的任务排队，按顺序一一执行。

异步执行可以实现**多任务并发**。

#### 相关必要概念引用 ####

>  *  并行： 同一时刻内多任务同时进行，多线程实现；
>  *  并发，同一时间段内，多任务同时进行着，但是某一时刻，只有某一任务执行，单线程可实现；
>  *  同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
>  *  异步任务，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
>  *  堆（heap）：内存中某一未被阻止的区域，通常存储对象（引用类型）；
>  *  栈（stack）：后进先出的顺序存储数据结构，通常存储函数参数和基本类型值变量（按值访问）；
>  *  队列（queue）：先进先出顺序存储数据结构。
>  *  任务队列：一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，”任务队列”上第一位的事件就自动进入主线程。  
>     
>     
>      *  除了放置异步任务的事件，”任务队列”还可以放置定时事件，即指定某些代码在多少时间之后执行。这叫做”定时器”（timer）功能，也就是定时执行的代码。如果有定时器，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。
>  *  回调函数（callback）: 那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
>  *  事件循环： 主线程从”任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环（Event Loop）。

# 异步机制如图： #

![JavaScript事件循环][JavaScript]

*  宿主环境为JavaScript创建线程时，会创建堆(heap)和栈(stack)，  
    
    
     *  堆内存储JavaScript对象，
     *  栈内存储执行上下文
 *  同步任务：
    
     *  执行栈内，执行上下文的同步任务按序执行
     *  执行完即退栈
 *  异步任务：
    
     *  异步任务执行时，该异步任务进入等待状态（不入栈）
     *  与此同时，通知线程“当触发该异步事件的时候（或该异步操作响应返回时），需向任务队列插入一个事件”
     *  当实际上异步事件触发或异步操作响应返回时，线程向任务队列插入相应的回调事件
     *  当执行栈清空后，线程从任务队列取出一个事件消息，其对应异步任务（函数）结束等待状态，进入执行栈，执行回调函数  
        
        
         *  如果该事件消息未绑定回调，则执行完任务后退栈，这个消息会被丢弃
 *  当线程空闲（即执行栈清空）时继续拉取消息队列下一轮消息（next tick，事件循环流转一次称为一次tick）。

# 回到问题本身 #

从上面的分析可知：

**1 等执行栈内同步的 for 循环执行结束出栈后，线程才会从任务队列里拉取异步的定时器的回调函数**

这段代码可以证明：

for (var i = 1; i <= 5; i++) { console.log(i); setTimeout(function timer() { console.log(i); }, i * 1000);
    }

输出：

*  先同时输出 12345；
 *  再输出5个6，每隔一秒输出一个

**2 根据作用域的工作原理，尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。**

所以，文章开头的那段代码等价于

var i = 1;
    // 定时器将其回调函数加入任务列表，执行栈清空一秒后执行
    var i = 2;
    // 定时器将其回调函数加入任务列表，执行栈清空二秒后执行
    var i = 3;
    // 定时器将其回调函数加入任务列表，执行栈清空三秒后执行
    var i = 4;
    // 定时器将其回调函数加入任务列表，执行栈清空四秒后执行
    var i = 5;
    // 定时器将其回调函数加入任务列表，执行栈清空五秒后执行
    var i = 6;
    // 定时器将其回调函数加入任务列表，执行栈清空六秒后执行
    
    // 循环结束后，线程读取任务列表，将定时事件对应的异步任务（回调函数）入栈执行
    console.log(i);
    
    console.log(i);
    
    console.log(i);
    
    console.log(i);
    
    console.log(i);
    
    console.log(i);

setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在”任务队列”的尾部添加一个事件，因此要等到同步任务和”任务队列”现有的事件都处理完，才会得到执行。而这个时候，i 就是 6。

# HOW TO FIX IT #

## 我知道，闭包！ ##

for (var i = 1; i <= 5; i++) {
      (function() { 
        setTimeout( function timer() { 
          console.log(i);
        }, i*1000)
      })()
    }

输出：然并卵，依然全是 6，  
简直666

**因为，新加上的 IIFE 作用域是”空的”，它并没有自己的变量。**  
**执行栈清空后，线程从任务队列里读取回调函数，它们还是引用那个唯一的全局变量i。**

## 正确的闭包姿势： ##

**通过在闭包作用域中添加自己的变量，从而在每次迭代中，捕获i的副本。**

for (var i = 1; i <= 5; i++) {
      (function() { 
        var j = i // 在闭包作用域中，通过添加自己的变量，每次迭代都捕获i的副本
        setTimeout( function timer() { 
          console.log(j);
        }, j*1000)         //至于时间这里，是i 是j无所谓
      })()
    }

更简洁的姿势：

for (var i = 1; i <= 5; i++) {
      (function(j) { 
        setTimeout( function timer() { 
          console.log(j);
        }, j*1000)
      })(i) 
    }

由此，能够输出：1 2 3 4 5，一秒一个

## ES6的打开方式： 块作用域 ##

for (var i = 1; i <= 5; i++) {
    
        let j = i
        setTimeout( function timer() { 
          console.log(j);
        }, j*1000)
    
    }

或直接在for循环头部里，每次迭代都声明一次。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

for (let i = 1; i <= 5; i++) { setTimeout( function timer() { console.log(i); }, i*1000)
    
    }

注：

> HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
> 
> 需要注意的是，setTimeout()只是将事件插入了”任务队列”，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

参考文档：

*  [http://blog.codingplayboy.com/2017/04/25/js\_async/][http_blog.codingplayboy.com_2017_04_25_js_async]
 *  [http://www.ruanyifeng.com/blog/2014/10/event-loop.html][http_www.ruanyifeng.com_blog_2014_10_event-loop.html]

[JavaScript]: /images/20220530/b5cafe8564b8468ca688ad1165783df2.png
[http_blog.codingplayboy.com_2017_04_25_js_async]: http://blog.codingplayboy.com/2017/04/25/js_async/
[http_www.ruanyifeng.com_blog_2014_10_event-loop.html]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html