Как правильно запустить обратный вызов после успешного завершения анимации и вызовов 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/

Answer 2

Вы можете использовать

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, намного чище!

Answer 3

Как насчет этого, когда обе функции успеха проверяют, что другая завершила работу, используя глобальную переменную?

$.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();
  }  
});