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中，您調用繼續執行代碼的函數。