等待每个jQuery？

Question

我正在尝试让一个在each语句中的div淡入/淡出。问题是在淡入/淡出完成之前就调用了下一个项目。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>

<script>
$.each([ "one", "two", "three"], function() {
  console.log( 'start - ' + this );
  animate( this );
  console.log( 'end - ' + this );
});

function animate( id )
{
  box = '#' + id;

  $(box).fadeOut( 500, function( )
  {

    console.log('showing - ' + id);
    $(box).fadeIn( 500 );
    $(box).css('backgroundColor','white');

  });

}
</script>

控制台显示 -

start - one
end - one
start - two
end - two
start - three
end - three
showing - one
showing - two
showing - three

我希望您能为我提供以下类似的内容 -

start - one
showing - one
end - one
start - two
showing - two
end - two
start - three
showing - three
end - three

那么，在继续下一个值之前，我如何等待每个“each”完全完成？

- scott

Answer 1

您需要使用回调函数 - 当前函数执行完毕时执行的函数。要使用 .fadeOut 实现此目的，您可以执行以下操作：

$('#element').fadeOut( 400, myFunction );

只有在fadeOut完成后，myFunction才会被调用。使用$.get进行的AJAX调用也可以有回调函数。

这里有一个可行的示例，尽管我相信还有更好的方法：

function animate(myArray, start_index) {

    // Stealing this line from Sam, who posted below.
    if(!start_index) start_index = 0;

    next_index = start_index+1;
    if(next_index > myArray.length) { return; }

    box = '#' + myArray[start_index]; 
    $(box).fadeOut(500, function() { animate(myArray,next_index); });
}

然后在你的document.ready中调用：

animate(theArray);

- Erik

Answer 2

这样怎么样，通过在函数内遍历数组中的每个项来进行动画？

var elements = [ "one", "two", "three"];
animate(elements);

function animate( elements, index )
{
    if(!index) index = 0;
    var box = '#' + elements[index];
    var $$box = $("#box");
    console.log( 'start - ' + elements[index] );
    $$box.fadeOut( 500, function( )
    {
        console.log('showing - ' + elements[index]);
        $$box.fadeIn( 500, function() {
            console.log( 'end - ' + elements[index] );
            if(elements[++index]) animate(elements, index);
        } ).css('backgroundColor','white');
    });
}

如果需要，您甚至可以循环回到开头：

var elements = [ "one", "two", "three"];
animate(elements);

function animate( elements, index )
{
    if(!index) index = 0;
    var box = '#' + elements[index];
    var $$box = $(box);
    console.log( 'start - ' + elements[index] );
    $$box.fadeOut( 500, function( )
    {
        console.log('showing - ' + elements[index]);
        $$box.fadeIn( 500, function() {
            $$box.css('backgroundColor','white');
            console.log( 'end - ' + elements[index] );
            // go to next element, or first element if at end
            index = ++index % (elements.length);
            animate(elements, index);
        } );
    }).css('backgroundColor', 'aqua');
}

- SamWM

---

这是一个比我的回答更完整的答案，针对确切的示例发布；尽管我想辩解说我试图将其保持为递归的简单示例，就像我在这里的评论一样：https://dev59.com/kEvSa4cB1Zd3GeqPgKl0 - Erik

你的例子更简单，有时候这是有益的（更容易理解，这取决于你想要做什么）。 - SamWM

Answer 3

听起来你正在尝试“循环”遍历一组div。你是否看过jQuery Cycle插件？

- PetersenDidIt

---

好的，这只是一个简单的例子。我可能想要使用数组中的值进行ajax调用，调用其他执行其他操作的函数，或者做其他事情。我编写了以下内容，以展示如何获取每个项目等待前一个项目完全结束的简单示例。 - scott