jquery 回调函数仅适用于最后一个循环 [英] jquery callback function only working on last loop

问题描述

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

The above bit of jQuery is inside a for loop. Each iteration of the loop does the following:

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

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

I'm using a call back function to reset the background so it finishes the animation before doing so. However, it only ends up affecting the last span referenced in the for loop.

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

If I move that bit of code outside of the callback, then it effects every span through every iteration of the for loop, (but doesn't wait for the animation in that case)

我猜这个问题与在动画函数内的函数内构建选择器有关.我的标记中是否有一些错误的语法?

I'm guessing the issue has to do with building the selector INSIDE the function INSIDE the animate function. Is there some bad syntax in my markup?

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

EDIT (per Russ's suggestion, I now include the full loop in the above sample)

推荐答案

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

This is a common problem experienced when combining closures with loops. JavaScript is a late-binding language and loops do not introduce a new scope. So:

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

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

There is only one i variable in this code. It starts at 0 and once the assignment-loop is finished is left at 5. The click event on the #thing0 element is only ever going to be fired after the loop has finished executing, by which point the value of i will be 5. You will not get the define-time value 0 which you might have expected.

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

This applies not only to the loop variable itself but to any other variables you are re-assigning for each time round the loop too. So in your example the value of barChartID inside the animation callback function will always be the id associated with the last element in your loop.

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

The usual workaround is to take a copy of the loop variable's value at define-time by using a structure that does introduce a new scope, namely another function:

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

更多关于循环闭包的信息.

这篇关于jquery 回调函数仅适用于最后一个循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！