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， 或者微信扫码关注哦！

转载于:https://juejin.im/post/5b28c979f265da59951fe01d