jquery 回调函数仅在最后一个循环中工作

Question

for (var i = 0; i < barValues.length; i++) {


    actualBarHeight = Math.floor((barValues[i] / chartMaxY) * barchartHeight);

    var barChartID = "#barChart" + (i + 1)
    $(barChartID + " .value span").css('background-color', 'transparent');
    $(barChartID + " img").animate({
        height: actualBarHeight
    }, 500, function () {
        $(barChartID + " .value span").css('background-color', 'white');
    }
    );

    $(barChartID + " .value span").html("$" + Math.floor(barValues[i]));
    $(barChartID + " .value").css("bottom", actualBarHeight + "px");
    $(barChartID + " .ylabel").html(chartMaxY);

}

上面的 jQuery 部分位于 for 循环内。循环的每次迭代都会执行以下操作:

• 设置跨度的背景
• 为对象添加动画
• 完成后，重置范围的背景

我正在使用回调函数来重置背景，以便它在此之前完成动画。但是，它最终只会影响 for 循环中引用的最后一个范围。

如果我将那段代码移到回调之外，那么它会影响 for 循环的每次迭代中的每个范围(但在这种情况下不会等待动画)

我猜测问题与在动画函数内的函数内构建选择器有关。我的标记中是否存在一些错误的语法？

编辑(根据 Russ 的建议，我现在在上面的示例中包含完整的循环)

Answer 1

这是将闭包与循环组合时遇到的常见问题。 JavaScript 是一种后期绑定(bind)语言，循环不会引入新的作用域。所以:

for (var i= 0; i<5; i++) {
    $('#thing'+i).click(function() {
        alert(i);
    });
}

这段代码中只有一个i变量。它从 0 开始，一旦赋值循环完成，就留在 5 处。 #thing0 元素上的 click 事件仅在循环执行完毕后才会被触发，此时 i 的值将是 5。您将不会获得您可能期望的定义时间值 0。

这不仅适用于循环变量本身，也适用于每次循环时重新分配的任何其他变量。因此，在您的示例中，动画回调函数内的 barChartID 值将始终是与循环中最后一个元素关联的 id。

通常的解决方法是在定义时使用一个结构来获取循环变量值的副本，该结构确实引入了新的作用域，即另一个函数:

$(barChartID + " img").animate({height: actualBarHeight}, 500, function(barChartID) {
    return function() {
        $(barChartID + " .value span").css('background-color','white');
    };
}(barChartID));

More on looped closures.