Question

在我为某些内容制作动画时，我正在执行AJAX调用。

我想在两次成功完成后发起回调？

有什么想法吗？

编辑：修正标题中的拼写错误

Answer 1

的好候选人

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

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/

Answer 2

如果有两个成功函数检查另一个是否已完成使用全局变量，那么该怎么做？

$.ajax({
  url: 'http://fiddle.jshell.net/favicon.png',
  beforeSend: function( xhr ) {
    window.waitingforajax = true
  },
  success: function( ) {
    window.waitingforajax = false;
    if (window.waitingforanimation) {
      myCallback();
    }   
  }
});

window.waitingforanimation = true;
$('#book').animate({
  opacity: 0.25,
  left: '+=50',
  height: 'toggle'
}, 5000, function() {
  window.waitingforanimation= false;
  if (window.waitingforajax) {
    myCallback();
  }  
});

Answer 3

您可以使用

jQuery.when( animation, ajax ).then( success );

但是不会同时执行这些方法。另一种选择是：

var stops = 2,
    check = function() {
        if (!--stops) {
            alert('ready!');
        }
    };

$('#elem').animate({opacity:0}, check);
$.ajax('domain.com', check);

编辑：似乎我错了。试试$ .when.then方法，更清洁！

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

3 个答案: