JavaScript变量绑定和循环

Question

JavaScript变量绑定和循环

考虑这样的循环：

for(var it = 0; it < 2; it++){
    setTimeout(function() {
        alert(it);
    }, 1);}

输出是：

=> 2=> 2

我希望它是：0,1。我看到两种方法来解决它：

解决方案＃1。

这个基于我们可以将数据传递给setTimeout的事实。

for(var it = 0; it < 2; it++){
    setTimeout(function(data) {
        alert(data);
    }, 1, it);}

解决方案＃2。

function foo(data){
    setTimeout(function() {
        alert(data);
    }, 1);}for(var it = 0; it < 2; it++){
    foo(it);}

还有其他选择吗？

Answer 1

使用let关键字，您可以完全解决这个问题：for(let&nbsp;it&nbsp;=&nbsp;0;&nbsp;it&nbsp;<&nbsp;2;&nbsp;it++){ &nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(it); &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1);}

Answer 2

与其他解决方案类似，但在我看来更干净：for&nbsp;(var&nbsp;it&nbsp;=&nbsp;0;&nbsp;it&nbsp;<&nbsp;2;&nbsp;it++)&nbsp;{ &nbsp;&nbsp;//&nbsp;Capture&nbsp;the&nbsp;value&nbsp;of&nbsp;"it"&nbsp;for&nbsp;closure&nbsp;use &nbsp;&nbsp;(function(it)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(it); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1); &nbsp;&nbsp;//&nbsp;End&nbsp;variable&nbsp;captured&nbsp;code &nbsp;&nbsp;})(it)}这为捕获保留了相同的变量名称，并为整个循环执行此操作，将其与超时设置的逻辑分开。如果你想在块中添加更多逻辑，你可以轻而易举地做到这一点。我唯一不喜欢解决方案的是最后重复“它”。