Question

我在每个迭代器之后调用回调函数时遇到了困难。

以下是一个例子：

<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');
    };
};

无济于事。

如何在每个迭代器中的所有动画完成后运行redFlash ？动画完成后，有没有办法让 goDown 回调 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(); });

Answer 1

您的语法有效，但无法实现您的目标。

请改为：

示例： 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();

基本上，您在<{em> redFlash之后向each() 发出立即电话。 each()没有回调，但.animate()函数确实需要回调。

编辑：从+ 600期限中删除了setTimeout。没有意义。

Answer 2

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

回调函数和jQuery的每个迭代器

2 个答案: