回调函数和 jQuery 的 each 迭代器答案

【问题标题】：Callback functions and jQuery's each iterator回调函数和 jQuery 的 each 迭代器
【发布时间】：2011-02-26 13:52:41
【问题描述】：

在 each 迭代器之后调用回调函数时遇到困难。

这是一个例子：

<html>
  <head>
    <script type="text/javascript" src="jquery-1.4.min.js"></script>
    <script type="text/javascript" src="move.js"></script>
  </head>

  <body>
    <div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:0px; width:30px; height:30px; background:#ddd;"></div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:110px; width:30px; height:30px; background:#ddd;"></div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:210px; width:30px; height:30px; background:#ddd;"></div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:310px; width:30px; height:30px; background:#ddd;"></div>
    </div>
  </body>
</html>

$(document).ready(function(){

    $ani = $('div.ani'); 

    var redFlash = function(){
        $ani.eq(0).css('background-color','#e35');
    };

    var goingDown = function(){
        $ani.each(function(i){
            $(this).animate({'top':'100px'}, (i+1)*2000);
        }),redFlash()};

    goingDown();

});

redFlash 函数并没有被调用。我也试过：

var goingDown = function(){
    $ani.each(function(i){
        $(this).animate({'top':'100px'}, (i+1)*2000);
    }),function(){
        $ani.eq(0).css('background-color','#e35');
    };
};

无济于事。

each 迭代器内的所有动画完成后如何让redFlash 运行？有没有办法在动画完成后让 goingDown 回调到 redFlash？

另外，有没有人知道关于 javascript/jquery 回调函数的任何好的在线资源或书籍？我手上的书在这个主题上有点片面。

编辑：在使用计数器时使用 Pointy 的指针解决。

$(document).ready(function(){

$ani = $('div.ani'); 

var redFlash = function(){
$ani.eq(0).css('background-color','#e35');
};

var ani_size = $ani.length-1;
console.debug(ani_size);

var goingDown = function(){
$ani.each(function(i){
    $(this).animate({'top':'100px'}, (i+1)*2000, function(){
    console.debug(i);
    if (i == ani_size){
        redFlash();
    }
    });
});
};
goingDown();

});

【问题讨论】：

redFlash() 调用前面是逗号而不是分号的任何特殊原因？
当您在问题中输入“pyquery”时，您的意思是“jQuery”，对吧？
我在那儿放了一个逗号，因为我认为这就是回调函数的调用方式。
回调不是通过在函数调用前放置逗号来定义的。通常，当您看到前面有逗号的回调时，这是因为您将函数作为参数传递给另一个函数的调用。 someFunc( "someArg", callbackFunction ) 需要编写一个函数来处理回调函数作为参数。它不仅仅是自动的。
@patrick 好的，显然 each() 不能以这种方式工作。那么如何将回调合并到 goDown() 中？

标签： javascript jquery callback jquery-animate each

【解决方案1】：

页面上每个元素的“id”属性必须是唯一的。您可能应该使用元素的“类”而不是“id”来表征它们。

【讨论】：

关于 ID 的要点。我什至懒得看HTML。 +1

【解决方案2】：

你的语法是有效的，但它不能完成你想要的。

改为这样做：

示例： http://jsfiddle.net/mXNz4/2/ （已更新）

$ani = $('div.ani'); 

var redFlash = function(){
    $ani.eq(0).css('background-color','#e35');
}

var goingDown = function(){
    var quantity = $ani.length;
    $ani.each(function(i){
        $(this).animate({'top':'100px'}, (i+1)*2000);
    });
    // schedule redFlash for the end of the last animation
    setTimeout( redFlash, quantity * 2000 );
}

goingDown();

基本上，您在each() 之后立即调用redFlash。。 each() 没有回调，但 .animate() 函数有，所以这就是回调需要去的地方。

编辑：从setTimeout 持续时间中删除了+ 600。没有意义。

【讨论】：

不，我想知道在每个迭代器内的all动画完成后如何调用redFlash。您的版本会在 first 动画之后立即调用 redFlash。
@shafty 要做到这一点，您可能需要查看添加到 jQuery 1.5 的“延迟”功能。或者，您可以使用自己的计数器来跟踪哪些动画已完成。
@shafty：是的，我明白你的意思。有几种方法可以做到这一点。您可以通过获取ani 元素的数量，将其乘以2000，然后使用setTimeout 来计算最后一个触发的时间，这样调用就会延迟。我会更新