JS笔试题（7）同步与异步

题目：

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

1.控制台会输出什么？

2.若是咱们约定，用箭头表示其先后的两次输出之间有 1 秒的时间间隔，而逗号表示其先后的两次输出之间的时间间隔能够忽略，代码实际运行的结果该如何描述？

答案：

1. 555555。
2. 5 -> 5,5,5,5,5，即直接输出1个5，1 秒以后，输出 5 个 5。

解析：

代码执行过程以下：

（1）先用循环几乎同时设置了5个定时器；而且i的值由0变成了5；

（2）循环体外console.log(i)，打印1个5;

（3）大约1秒以后，5个定时器都触发，打印5个5。

setTimeout是Js最基本的异步函数，本题主要是对Js同步和异步知识点的考察，那么这里说的同步和异步究竟是什么呢？

"同步"，一下就让人想到"一块儿"这个词；"异步"呢，从字面来说，像是"一边...一边...",好比"小明一边吃雪糕一边写做业"，雪糕吃完了，做业也写完了，看起来彻底没毛病，可是这样理解Js的同步和异步就错了！Javascript语言是一门单线程的语言，全部任务能够分红两种，一种是同步任务，另外一种是异步任务。同步任务指的是，在"主线程"上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

具体来讲，异步执行的运行机制以下。（同步执行也是如此，由于它能够被视为没有异步任务的异步执行。）

（1）全部同步任务都在主线程上执行，造成一个"执行栈"。

（2）主线程以外，还存在一个"任务队列"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的全部同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

题外话

若是指望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码？ 熟悉闭包的小伙伴很快能给出下面的解决办法：

for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(j);
        }, 1000);
    })(i);
}
console.log(i);
复制代码

巧妙的利用 IIFE（Immediately Invoked Function Expression：声明即执行的函数表达式）来解决闭包形成的问题，确实是不错的思路，可是初学者可能并不以为这样的代码很好懂。有没有更符合直觉的作法?咱们只须要对循环体稍作手脚，让负责输出的那段代码能拿到每次循环的i值便可。

var output = function (i) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
};
 
for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}
console.log(i);
复制代码

感谢您花时间读到这里～

按照惯例，推广一下微信公众号“前端麻辣烫”，主要是分享前端知识，着重前端面试知识。欢迎关注～欢迎投稿～

微信搜索微信号：WebSnacks， 或者微信扫码关注哦！