如何在动画和ajax调用成功完成后正确触发回调？

Question

好吧,当我动画一些内容时,我正在执行AJAX调用.

两个成功完成后我想要回拨一个回调？

任何的想法？

编辑:修复标题中的拼写错误

Answer 1

这听起来像是jQuery Deferred的一个很好的候选者

这里有一些关于它如何工作的粗略代码.

function doAjax(){
   return $.get('foo.htm'); // or $.ajax, $.getJSON.....etc 
}

function doAnimation(){
   var dfd = $.Deferred();
   $("div").fadeIn(800).delay(1200).fadeOut(300, dfd.resolve);
   return dfd.promise();
}

$.when( doAjax(), doAnimation() )
 .then(function(){
    console.log( 'I fire once BOTH have completed!' );
 })
 .fail(function(){
    console.log( 'I fire if one or more requests failed.' );
 });

一些参考:

http://api.jquery.com/promise/

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

根据一些评论,我检查以确保动画和ajax调用并行执行并按预期执行.http://jsfiddle.net/Gdqfp/4/