如何让我的脚本等待jQuery动画完成？

Question

我有一个函数调用runUpdates我通过JSON对象的数组来。该函数查看对象，并通过if语句来决定它是什么样的更新以及处理该更新应该采取的方向。在某些情况下，更新有一个与之相关的动画。我想使用jQuery的动画来为这些动画添加动画，但我希望它在继续下一步之前等待动画完成。

我的程序看起来像这 -

runUpdates(updates) { 
    for(i = 0; i < updates.length; i++) { 
     update = updates[i]; 
     if(update.type = "blabla") { 
      //do stuff 
     } else { 
      //do other stuff 
      if(update.animations) { 
       for(k = 0; k < animations.length; k++) { 
        //do jquery animate AND wait for animation to finish before proceeding 
       } 
      } 
     } 
    } 
} 

但是脚本会继续在动画开始之后继续执行。有没有简单的方法来解决这个问题，或者我需要重新调用函数调用的循环？

Answer 1

你不是在你的问题很清楚什么是你需要等待。我假设你想等待每个动画完成，然后继续下一个动画。

var pipe = $.Deferred().resolve(); 

for(var k = 0; k < animations.length; k++) 
{ 
    pipe = pipe.pipe(function() 
    { 
     return $('element').animate({ 
      // animate whatever you want 
     }, 300); 
    }); 
} 

这里有一个演示：http://jsfiddle.net/ZyS6c/

---

如果你再想把所有的动画完成后运行一些代码，把它放在一个done功能：

pipe.done(function() 
{ 
    // Put your code here... 
}); 

.. 。而这里的小提琴：http://jsfiddle.net/ZyS6c/1/

---

如果你不感兴趣的链接动画（你希望他们异步执行），且只希望所有的动画完成后，运行一些代码，使用：

var deferreds = []; 

for(var k = 0; k < animations.length; k++) 
{ 
    deferreds.push(
     $('element').animate({ 
      // animate whatever you want 
     }, 300) 
    ); 
} 

$.when.apply($, deferreds).done(function() 
{ 
    // Put your code here... 
}); 

...和最后，这里是为小提琴：http://jsfiddle.net/pdDME/

Answer 2

首先，你可以使用jQuery的动画回调 - http://jsfiddle.net/zutBh/1/。

二是有jQuery.deffereds对象。