JS网红面试题-setTimeout与循环闭包

先看一段代码

 

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

输出结果是什么？？ 肯定有好多人以为是 0 1 2 3 4

这么想当然是错的，因为setTimeout()执行的是一个异步的操作，那能异步到什么地步呢，就是当所有的代码执行完毕之后，才会执行setTimeout() 所以当setTimeout函数执行的时候for循环早就已经执行完毕了，那么此时的i值就是5 所以正确的结果就是 5 5 5 5 5

 

• 现在来思考一个问题，假如说我就是想用这种方式来实现输出0 1 2 3 4呢？？有可能吗？怎么实现呢？
• 不卖关子了，明确的说使用闭包的原理可以解决这个问题。

 

闭包在JS中被称为神话一样的存在

 

• 要想形成闭包一个必要的条件，你得有一个父级的函数，包括住延时器，当延时器在被调用的时候，延时器与foo内部的上下文形成闭包，类似于下面这样

 

for (var i = 0; i < 5; i++) {
    function foo() { //父级函数
        setTimeout(() => {
            console.log(i);
        }, i * 1000);
    }
    foo()
}

 

• 如上父级函数foo包括住了延时器setTimeout，但是现在我们运行仿佛结果还是 5 5 5 5 5 怎么回事哪里出错了吗？？？
• 究其原因原来是因为，setTimeout在调用的时候虽然与foo()的内部形成了闭包，但是我们并没有把i的值给限定在每一个闭包里面，于是改成下面的代码就可以如愿以偿了

 

for (var i = 0; i < 5; i++) {
    function foo(i) { //父级函数
        setTimeout(() => {
            console.log(i);
        }, i * 1000);
    }
    foo(i)
}