Для очереди из асинхронных штук есть Promise («Промисы» = обещания).
Даже
в jQuery, начиная с версии 1.8 можно возвращать из каждой анимации
Promise и сложить цепочку
A.then(B).then(C):
$("#button").click( animate );
function animate() {
number1().then( number2).then( number3);
}
function number1() { // асинхронная, вернет промис
return $('p').each( function(i) { $(this).delay((i++) * 500).fadeTo(2000, 1)} )
.promise();
}
function number2() { // асинхронная, вернет промис
return $('p').hide("fast").promise();
}
function number3() { // выполнится мгновенно
$('#result').html("Hello World");
}
FiddleСтарый ответ. Функции jQuery, выполнение которых занимает время, обычно принимают ещё одним параметром функцию, которая выполнится по завершении анимации. Например для
.hide() см. параметр
complete
Поэтому
можно так:
$("#button").click( number1 );
function number1() {
var $p = $('p'), len = $p.length;
$p.each(function(i) {
$(this).delay((i++) * 500).fadeTo(2000, 1, function(){
if(i===len) $( "p" ).hide( "fast", number2); // выполнить только для последнего из всех
});
})
}
function number2() {
var number2func = document.getElementById('result');
number2func.innerHTML = "Hello World";
}
