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 循环中。循环的每次迭代都执行以下操作：

• 设置跨度的背景
• 动画对象
• 完成后，重置 span 的背景

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

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

我猜这个问题与在 animate 函数内部的函数内部构建选择器有关。我的标记中有一些不好的语法吗？

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

Answer 1

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

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

这段代码中只有一个i 变量。它从0 开始，一旦分配循环完成，就留在5。 #thing0 元素上的点击事件只会在循环完成执行后 被触发，此时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.

Answer 2

这是因为您的回调函数有一个指向barChartID 变量的隐式指针。这就是闭包的工作原理。您想要的是在每次迭代中创建barChartID 的当前值的新副本。解决此问题的一种模式是在函数内运行 for 循环的主体。我在 John Resig 即将出版的一本书 Secrets of the JavaScript Ninja

中看到了这种模式

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

Answer 3

由于您使用的是 jQuery，因此您可以使用 $.each 函数来代替 for 循环。使用回调而不是循环将创建一个新的闭包。

$.each(barValues, function(i, barValue){
    actualBarHeight = Math.floor((barValue/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(barValue));
    $(barChartID + " .value").css("bottom",actualBarHeight+"px");
    $(barChartID + " .ylabel").html(chartMaxY);
});

Answer 4

您可以尝试缓存跨度选择器，如下所示：

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