网络技术问题 | JavaScript 课程测验 1 |问题 44

问题描述

考虑以下代码：

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

上述代码的输出结果为什么？

解答

上述代码的输出结果不是我们所期望的 0, 1, 2, 3, 4。实际上，它会输出 5, 5, 5, 5, 5。

这是因为 JavaScript 中的定时器是异步执行的，当一个定时器到达计时器的时间后，执行函数的时候，i 的值已经是 5 了。

因此，我们需要采用一些技巧来解决这个问题，例如使用闭包或 let 关键字。

使用闭包的代码如下：

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

使用 let 关键字的代码如下：

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

在上面的两个例子中，每次循环迭代时，都创建了一个新的执行环境，并将当前的 i（即j）作为一个局部变量传递给函数。这样就保证了函数的执行环境与当前循环迭代的值相符。

总结

在 JavaScript 中，定时器是异步执行的，如果需要在定时器中使用循环变量，需要采用一些技巧来保证函数的执行环境与当前循环迭代的值相符。常见的解决方式包括使用闭包或 let 关键字。