jQuery: цепочка анимаций и запросы AJAX

Question

У меня есть страница с описанием продукта и вы хотите загрузить подробный вид для каждого продукта через AJAX и отобразить его на странице. У меня есть более сложный набор условий, в которых я хочу настроить анимацию, но я буду держать это здесь просто.

В принципе, после щелчка, я хочу запустить запрос AJAX и одновременно анимировать (в некоторых случаях, серию анимаций ...) оболочку содержимого открыть и показать состояние загрузки. Как только ОБА из них будут сделаны, я тогда хочу заглянуть и оживить контент. Я думал, что jQuery Deferred Objects станет для вас способом, но я не очень хорошо понимаю их, и мои попытки не доставили меня туда, где я хочу быть.

Я пытался что-то вроде этого:

var dfr = $.Deferred(); 
dfr.then(function() { return wrapper.fadeIn(5000); }); 

$.when(dfr, $.get('/detail.html')) 
.then(function() { 
    console.log('All done, run additional animations...'); 
}); 

dfr.resolve(); 

... но он сработал, как только запрос AJAX выполняется, даже если анимация еще работает.

Я также попытался это:

var dfr = $.Deferred(); 
dfr.then(function() { return wrapper.fadeIn(5000); }); 
dfr.then(function() { return $.get('/detail.html'}) }); 
dfr.done(function() { console.log('All done, run additional animations...'); }); 
dfr.resolve(); 

... но это просто выполняет все then/done вызовов одновременно. Я также попытался переключиться на pipe вместо звонков then, но безрезультатно.

Мне бы хотелось понять Отложенные объекты (это даже подходящее/предназначенное для них использование ...?) И, конечно же, как я могу достичь своих целей для этой страницы. Любая помощь или советы очень ценятся ....

Answer 1

Эта страница имеет пример делает именно то, что вы говорите: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

это больше похоже на это:

function animateStuff() { 
    var dfd = $.Deferred(); 
    wrapper.fadeIn(5000, dfd.resolve); 
    return dfd.promise(); 
} 

$.when(animateStuff(), $.get("/whatever")) 
    .then(function() { 
     // do something really great 
}) 

Answer 2

Это может помочь зарегистрировать обработчик, когда ваши запросы Ajax закончили:

$('.content').ajaxStop(function() { 
    animateContent(); 
}); 

Больше на .ajaxStop() here

Answer 3

Коллекции jQuery являются наблюдаемыми (они имеют метод). Таким образом, вы можете сделать это очень просто:

$.when(wrapper.fadeIn(5000), $.get("/whatever")).done(function() { 
    // animation and ajax request complete 
}); 

Если вам нужно цепи анимации на различных элементах, используйте .pipe():

function chainAnim() { 
    return wrapper.fadeIn(5000).promise().pipe(function() { 
     return internal.fadeIn(1000); 
    }); 
} 

chainAnim().done(function() { 
    // wrapper than internal faded in 
}); 

Вы все еще можете использовать $ .when, конечно:

$.when(chainAnim(), $.get("/whatever")).done(function() { 
    // animation and ajax request complete 
});