Javascript JQuery在查看其余代码之前，每个循环都会循环一行代码x次

我在Jquery中有一个循环：

var fadeTime=500;
css_id=0;
$.each(my_array, function (i, d_U) {
css_id++;
an_v=d_U[1];
an_d=d_U[4];

do_c_function("id_344",true,true);

$("#box_"+css_id).fadeIn(fadeTime,function(){

   //this stuff will happen once the fadein is complete

   $("#box_"+css_id).animate({top: '-50px'},fadeTime,function(){

       //this stuff will happen once the animate is complete

       alert("#box_"+css_id);//for debugging

    });//end of animation

  });//end of fadein

});//end of each loop

现在，正如您可能已经注意到的，我正在尝试使用

css_id

变量和

++使循环每次为不同的div设置动画（添加1）

问题是，
css\u id
在下面的任何代码执行一次之前就达到了一个高值。因此，当需要设置动画时，Jquery将尝试设置
#box_210
的动画，而它应该设置
#box_1
的动画

有没有办法让它只执行
css_id++行一次，然后执行动画行，然后再使用
css_id++行…等等

我试着把
css_id++行在回调中使用两个动画，但这似乎不起作用

感谢
您的动画回调函数正在对
css\u id
形成闭包，因此存储对
css\u id
的实时引用，而不仅仅是创建动画循环时该变量持有的值

由于所有参数都是通过JavaScript中的值传递的，因此可以使用jQuery的数据函数来打破闭包，并在此时拍摄css_id值的快照

    $("#box_"+css_id).data("css_id", css_id).fadeIn(fadeTime,function(){
       var local_css_id = $(this).data("css_id");
       $("#box_"+ local_css_id).animate({top: '-50px'},fadeTime,function(){

           //this stuff will happen once the animate is complete

           alert("#box_" + local_css_id);//for debugging
        });//end of animation
      });//end of fadein    
    });//end of each loop

问题在于
css\u id
的范围。最简单的修复方法是在循环中调用函数。对函数的每次调用都将在函数范围内获得自己的参数，该参数不会随着变量的增加而改变

大概是这样的：

function doTheAnimation(css_id) {
    $("#box_" + css_id).fadeIn(fadeTime, function() {

        //this stuff will happen once the fadein is complete
        $("#box_" + css_id).animate({
            top: '-50px'
        }, fadeTime, function() {

            //this stuff will happen once the animate is complete
            alert("#box_" + css_id); //for debugging
        }); //end of animation
    }); //end of fadein   
}

var fadeTime = 500;
css_id = 0;
$.each(my_array, function(i, d_U) {
    css_id++;
    an_v = d_U[1];
    an_d = d_U[4];

    do_c_function("id_344", true, true);

    doTheAnimation(css_id);

}); //end of each loop

这里有一把小提琴来说明两者的区别

如果希望每个动画按顺序进行（下一个动画在上一个动画完成后开始），可以这样编码，其中每个动画在本地函数中完成，最终完成函数再次调用本地函数来执行下一个动画：

function doFades() {
    var fadeTime=500;
    css_id=0;
    var i = 0;
    function doOneFade() {
        if (i < my_array.length) {
            var d_U = my_array[i++];
            css_id++;
            an_v=d_U[1];
            an_d=d_U[4];

            do_c_function("id_344",true,true);

            $("#box_"+css_id).fadeIn(fadeTime,function(){

               //this stuff will happen once the fadein is complete

               $("#box_"+css_id).animate({top: '-50px'},fadeTime,function(){

                   //this stuff will happen once the animate is complete

                   alert("#box_"+css_id);//for debugging
                   doOneFade();

               });//end of animation

           });//end of fadein
       }
   }
   doOneFade();
}

函数doFades（）{
var fadeTime=500；
css_id=0；
var i=0；
函数doOneFade（）{
if（i
嘿，刚刚试过代码，它做的事情完全一样。谢谢我看不到
setTimeout
@JamesMontagne有什么用-据我所知，在第一次淡出开始之前，循环的90%迭代都在燃烧。我认为OP希望这些动画分布得更均匀。这个问题还没有解决。fadein似乎做得很好，但动画只做最后一个div（因为css_id已经达到了最后一个数字）。@Nav-我想问题是我从一开始就说过的，但没有充分诊断：回调正在形成css_id的闭包。请参阅我更新的答案