Question

有没有办法在循环中等待隐藏功能？我的意思是如果我在html中有这个结构：

<div class='example'>
    <span> One </span>
    <span> Two </span>
    <span> Three </span>
<div>

在js中我想做这样的事情：

$('.example span').each(function(i, span) {
    $(span).hide('slow');
});

我相信js是异步的，所以它不会等待hide结束，但也许有一种我不知道等待隐藏动画结束并继续下一个元素的方法？

Answer 1

您可以使用.delay()在合适的时间运行它们，如下所示：

$('.example span').each(function(i, span) {
  $(span).delay(600 * i).hide('slow');
});

You can give it a try here

我们在这里所做的就是延迟下一个动画600ms（the "slow" duration）倍的索引，所以第一个动画立即开始（从0开始，0 * 600 = 0），第二个在600ms开始（第一个应该完成然后），第三个在1200ms，等等。

Answer 2

我使用async.js库来管理这类东西：

async.forEachSeries($('.example span'), function(span, callback) {
  $(span).hide('slow', callback);
});

这将连续运行每个隐藏功能，而不依赖于必须与隐藏动画的速度相匹配的延迟功能。

You can try it out here.

不可否认，可能不值得为这一个问题包含另一个库，但如果你遇到问题，如动画和ajax函数等异步调用很多，那么我建议你看一下：）

您可以找到async.js library on github

Answer 3

隐藏动画时，您可以call a function - 隐藏该回调中的下一个。

function hideTags()
{
  var tags = $('.post-taglist a');
  var len = tags.length;
  var hide = function(i){
    if(i >= len)
      return;
    tags.eq(i).hide(1000, function(){hide(i + 1);});
  };
  hide(0);
}

从Firebug控制台运行此命令，看看你的标签一个接一个地消失。

Answer 4

我有类似的想法并在Code Review

上发布了一个问题

My code类似于：

var jParent = jQuery(".parent");
jParent.children().reverse().each(function()
{
    var jThis= jQuery(this);
    // queue puts the function in the normal "fx" queue. This means that the first one will always be fired automatically.
    jParent.queue( function()
    {
        jThis.slideDown(function()
        {// Dequeue Sets the next one going after the slideDown finishes
            jParent.dequeue(); 
        });

    });
});

有人发布的答案如下:(简化）

var DURATION = 500;

.each(function(index){
    var jDiv = $(this);

    jDiv.delay(DURATION * index);
    // used a variable delay to deal with the timing
    jDiv.slideDown(DURATION);
});

就我个人而言，我认为第二个很容易低调，但更多的是偏好而不是恕我直言。

一些轻读：.queue()和.dequeue()

jQuery多个方法等待

4 个答案: