JavaScript - for循环中的setTimeout函数导致代码在for循环完成之前执行

Question

我有一个for循环，为了动画目的，我需要延迟每个循环。如果我删除了setTimeOut函数，那么下面的代码会正确循环，并且变量会正确地通过循环递增，然后执行底线。但是使用setTimeOout函数，底线首先执行，然后for循环执行7次（应该是6），每次告诉我x = 6。显然，我做错了什么。有任何想法吗？

for (x = 0; x <= 5; x++) { 
    setTimeout(function() { 
     alert("For loop iteration #" + x); 
    }, 500 * x); 
} 
alert("Code to be executed after completed for loop"); 

Answer 1

x是一个全局变量。第一次警报发生时，您已将其增加到6。如果你不希望这种情况发生，使用这样的事情来代替，该递增被称为每500ms里面的功能：

var x = 0; 
var interval = setInterval(function() { 
    alert("Loop iteration #" + x++); 
    if(x==5) { 
     clearInterval(interval); 
     alert("Code to be executed after completing loop"); 
    } 
}, 500); 

Answer 2

你需要一个封闭保存在封闭的情况对当前x值。

for (var x = 0; x <= 5; x++) { 
    (function(x) { 
     setTimeout(function(){ 
      alert("For loop iteration #" + x); 
      if (x == 5) { 
       setTimeout(function(){ 
        alert("Code to be executed after completed for loop"); 
       }); 
      } 
     }, 5 * x); 

    })(x); 
} 

Answer 3

这是一个共同的概念错误。

1. JavaScript是无阻塞
2. 给变量的引用传递，而不是实际值

你必须记住，该变量x是动态的。对x的引用传递给alert("For loop iteration #" + x);而不是值。因此，当alert最终执行时，x将具有执行时的值，而不是启动setTimeout的值！

本质上它是这样的：
您的循环处理完毕，创建6个超时，然后立即显示您的alert("Code to be executed after completed for loop");。然后在一段时间之后，你的超时被执行，然后在循环结束之后全部显示变量x在它的状态 - 6。

您需要关闭，以便将值x交给警报，而不是对变量x本身的引用。

for (var x = 0; x <= 5; x++) { 
    (function(z) { 
     setTimeout(function() { 
      alert("For loop iteration #" + z); 
     }, 5 * z); 
    })(x); 
} 

编辑：

为了解决你的第二个问题，你需要使用一个回调函数。 CB函数是您的代码的逻辑延续，但不会立即执行，但需要停止，直到某个点（您的最后一次警报发生）为止。你可以这样实现：

for (var x = 0; x <= 5; x++) { 
    (function(z) { 
     setTimeout(function() { 
      alert("For loop iteration #" + z); 
      if (z===5){ continue_code() } 
     }, 5 * z); 
    })(x); 
} 

function continue_code(){ 
    alert("Code to be executed after completed for loop"); 
    // Here comes all your code 
    // which has to wait for the timeouts from your for loop 
} 

在上一次setTimeout中，您调用继续执行代码的函数。