回调函数和 jQuery 的 every 迭代器

发布于 2024-10-19 08:31:39 字数 2234 浏览 8 评论 0原文

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

没有效果。

如何让 redFlash 在每个迭代器内的所有动画完成后运行？有没有办法可以在动画完成后对 redFlash 进行 goingDown 回调？

另外，有谁知道关于 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();

});

原文

I'm having difficulty calling a callback function after an each iterator.

Here's an example:

<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();

});

The redFlash function doesn't get called though. I've also tried:

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

to no avail.

How can I make redFlash run after all the animation inside the each iterator has completed? Is there a way I can make goingDown callback to redFlash after the animation completes?

Also, does anyone know of any good online resources or books for javascript/jquery callback functions? The book I have is a little flaky on this topic.

Edit: Solved using Pointy's pointer on using counters.

$(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();

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赤濁 2024-10-26 08:31:40

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

请执行此操作：

示例： http://jsfiddle.net/mXNz4/2/< /a> （更新）

$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。没有道理。

Your syntax is valid, but it won't accomplish what you want.

Do this instead:

Example: http://jsfiddle.net/mXNz4/2/ (updated)

$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();

Basically, you placed an immediate call to redFlash after the each(). An each() doesn't have a callback, but the .animate() function does so that's where the callback needs to go.

EDIT: Removed the + 600 from the setTimeout duration. Didn't make sense.

回复收藏 0 原文