javascript - 如果多个动画完成，如何从函数返回

Question

我正在使用一个函数来为一些东西设置动画，例如:

function doMyStuff(){
 $('#test1').animate({...}, {queue:false});
 $('#test2').animate({...}, {queue:false});
 return true;
}
// this should only go on if doMyStuff() is complete
doMyStuff();
alert("We can go on, doMyStuff() is finished");

我只想继续，如果这个功能用他的动画完成了。我怎样才能做到这一点？目前它不会等待动画结束。

Answer 1

利用promises :

function doMyStuff(){
   return $.when(
     $('#test1').animate({...}, {queue:false}).promise(),
     $('#test2').animate({...}, {queue:false}).promise()
   );
}

doMyStuff().then(function() {
    alert("We can go on, doMyStuff() is finished");
});

动画完成后要执行的所有代码都必须从传递给 .then 的回调中调用。

来自.promise documentation (强调我的):

The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.

By default, type is "fx", which means the returned Promise is resolved when all animations of the selected elements have completed.

$.when只是创建一个新的 promise ，当传递给它的所有 promise 都得到解决时，该 promise 就得到解决。