Пользовательский обратный вызов Jquery не работает, не может найти проблему с корнем

0

Используя этот учебник: 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');    

}

Благодарю!

  • 0
    У меня отлично работает. Это может быть проблема совместимости браузера. Какой браузер вы используете?
  • 0
    Firefox и Chrome ... Вы используете предоставленную мной скрипку? Я хочу, чтобы сначала произошла анимация, а затем предупреждение (просто чтобы уточнить).
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

"Синхронно", я думаю, вы имеете в виду "обратный вызов не ждет, пока анимация не завершится". По крайней мере, это то, что происходит на скрипке на последней версии 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 опции (и других полезных деталях!)

Примечание: при вычислении "синхронный" не означает, что говорят популярные словари. По сути, это означает, что вы выполняете операции по порядку. Альтернативой является "асинхронный", когда сразу может произойти несколько вещей. Это немного упрощенная версия. Более подробный ответ см. Здесь.

Поделиться
  • 0
    Хорошо, этот ответ близок к тому, что мне нужно, спасибо! НО, что если функция $(div).animate() animate(div, callback) имеет дополнительную логику, выходящую за пределы только $(div).animate() и даже обратный вызов внутри $(div).animate() происходит слишком рано? Извините, я знаю, что это выходит за рамки моего первоначального вопроса.
  • 1
    «Блокировка» действительно означает, что никакие другие вычисления не будут выполняться в потоке, пока он не будет завершен, что здесь не так ( animate прежнему возвращается немедленно, даже если callback не будет выполнен до позднего времени). Это действительно синхронное / асинхронное различие, а не блокирование / неблокирование.
Показать ещё 2 комментария
0

Ответ Дж. Дэвида Смита правильный, но я хотел бы указать, что в jQuery вы можете просто это сделать, используя один вызов $.animate вместо двух. Вы можете указать несколько свойств в первом аргументе.

function animate(div, callback) {
  $(div).animate(
    { left: '200px', top: '200px' },
    { duration: 5000, complete: callback }
  );
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню