Используя этот учебник: http://www.impressivewebs.com/callback-functions-javascript/
Я сделал простую функцию обратного вызова... однако он вызывает синхронно. Где я иду не так? Это сводит меня с ума!
Ожидаемое поведение: окно предупреждения и изменение цвета ожидают завершения анимации.
Скрипт: http://jsfiddle.net/PCj5h/
$('#div1').click(function(){
animate('#div1', function(){
changeDiv2('#div2');
alert('done');
});
});
function animate(div, callback){
$(div).animate({left: '200px'}, {duration: 5000, queue: true});
$(div).animate({top: '200px'}, {duration: 5000, queue: false});
callback();
}
function changeDiv2(div){
$(div).css('color','#FF0000');
}
Благодарю!
"Синхронно", я думаю, вы имеете в виду "обратный вызов не ждет, пока анимация не завершится". По крайней мере, это то, что происходит на скрипке на последней версии Chromium.
Попробуйте это, чтобы заставить callback ждать завершения анимации до запуска: http://jsfiddle.net/EGCVy/
Измененный код:
function animate(div, callback){
$(div).animate({left: '200px'}, {duration: 5000, queue: true});
$(div).animate({top: '200px'}, {duration: 5000, queue: false, complete: callback});
}
См Jquery animate
документацию для получения дополнительной информации о complete
опции (и других полезных деталях!)
Примечание: при вычислении "синхронный" не означает, что говорят популярные словари. По сути, это означает, что вы выполняете операции по порядку. Альтернативой является "асинхронный", когда сразу может произойти несколько вещей. Это немного упрощенная версия. Более подробный ответ см. Здесь.
$(div).animate()
animate(div, callback)
имеет дополнительную логику, выходящую за пределы только $(div).animate()
и даже обратный вызов внутри $(div).animate()
происходит слишком рано? Извините, я знаю, что это выходит за рамки моего первоначального вопроса.
animate
прежнему возвращается немедленно, даже если callback
не будет выполнен до позднего времени). Это действительно синхронное / асинхронное различие, а не блокирование / неблокирование.
Ответ Дж. Дэвида Смита правильный, но я хотел бы указать, что в jQuery вы можете просто это сделать, используя один вызов $.animate
вместо двух. Вы можете указать несколько свойств в первом аргументе.
function animate(div, callback) {
$(div).animate(
{ left: '200px', top: '200px' },
{ duration: 5000, complete: callback }
);
}