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)

我猜这个问题有关建立选择器INSIDE函数INSIDE的animate函数。

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?

EDIT（根据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 元素上的点击事件只有在循环完成执行后才会被触发，因此<$> c $ c> 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.

通常的解决方法是通过使用 引入新作用域的结构，在define-time获取循环变量的值的副本，即另一个函数：

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屋！