为什么 setTimeout 回调中的变量没有预期值？

<div id="image_cont">
  <img src="images/pic1.jpg" alt="pic1" />
  <img src="images/pic2.jpg" alt="pic2" />
  <img src="images/pic3.jpg" alt="pic3" />
</div>

$(document).ready(function() {
    slide(3, "image_cont", 5000, 600);
});

function slide(numberOfImages, containerId, timeDelay, pixels) {
    //start on first image
    var i = 0;
    var style = document.getElementById(containerId).style;
    window.setInterval(function() {
        if (i >= numberOfImages){
            i = 0;
        }
        var marginLeft = (-600 * i);
        var pixelMovement = pixels/15;


////////////////////////////////////////LOOK HERE//////////////////////////////


        for (var j = 0; j * pixelMovement < 600; j++){
            window.setTimeout(function(){
//alert('marginLeft: ' + marginLeft + ' j: ' + j + ' pixelMovement: ' + pixelMovement);
//this alert shows j is 15 when it should be 0, what's going on?


/////////////////////////////////////////END//////////////////////////////////
                style.marginLeft = (marginLeft - j * pixelMovement) + "px";
                }, 150);
        }
        i++;
    }, timeDelay);
}

您不能直接在 setTimeout 函数中使用变量 j ，因为该函数会在您的设置之后运行一段时间for循环已完成，因此 j 具有终止值，而不是调用 setTimeout 时的值。

您可以在 setTimeout 函数中可用的函数闭包中捕获 j 的当前值，如下所示：

for (var j = 0; j * pixelMovement < 600; j++){
    window.setTimeout(function(cntr) {
        return function() {
            style.marginLeft = (marginLeft - cntr * pixelMovement) + "px";
        };
    } (j), 150);
}

我发现这种类型的关闭有点令人困惑。我会尽力解释发生了什么。我们传递到setTImeout()function 执行一个带有一个参数的匿名函数的结果（我在这里将其命名为 cntr），我们传递的值j作为该参数的值。当该函数执行时（现在的值为j在它内部可用），该函数返回另一个匿名函数。这个另一个匿名函数是什么setTimeout当它触发时实际上会调用。但是，第二个匿名函数位于第一个函数的函数闭包内，该函数的捕获值为j在其中（作为我重命名的变量cntrwhile 在函数闭包内以避免解释时混淆）。正是匿名函数让它变得如此混乱，但它确实有效。