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 值保存在闭包上下文中。

 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);
}