Как настроить обратный вызов для запуска * перед * анимацией jquery?

Question

Я пытаюсь настроить цикл, в котором анимация запускается определенное количество раз, а функция запускается перед каждой итерацией анимации. Время заканчивается тем, что оно выключено - он запускает обратный вызов n раз, а затем запускает анимацию n раз. Например:

for (var i=0;i<3;i++) {
  console.log(i);
  $('#blerg').animate({top:'+=50px'},75,'linear', function(){log('animated')});
}

выходы

0
1
2
animated
animated
animated

Я столкнулся с этой проблемой в scriptaculous, прежде чем переключился на jquery, и обнаружил обратный вызов анимации beforeSetup. Есть ли эквивалент jquery?

Answer 1

Вы также можете попробовать использовать функцию очереди.

http://docs.jquery.com/Effects/queue#callback

Внутренне, насколько я помню, animate использует одну и ту же очередь выполнения, поэтому теоретически это должно работать (не проверено).

/* Safe Namespace + Onload : I do this everywhere */
jQuery(function($){ 
 /* Calling this once instead of many times will save 
    a lot of wasted calls to document.getElementById + processing garbage 
  */
 var blerg = $('#blerg');
 var addStep = function( i )
 {
     blerg.queue(function(){ 
        console.log(i);
        $(this).dequeue();
     }); 
     blerg.animate({top:'+=50px'},75,'linear'); 
     /* In theory, this works like the callback does */
     blerg.queue(function(){
       log('animated');
       $(this).dequeue();
     });
 };

 for (var i=0;i<3;i++) 
 {
  /* I call a function here, because that way you don't need to worry 
     about the fact 'i' will reference the last value of 'i' when the code 
     gets around to executing. */
    addStep(i); 
 }
});

---

Кент, я не совсем понимаю, почему вам нужно явно указать обратный вызов в очередь. Не то, чтобы вы ошибались - это не работает, если обратный вызов является аргументом animate () - но мне просто любопытно.

Это не обязательно для второго случая, но я подумал, что это сделает более последовательный и несколько более аккуратный код, если кто-то попытается сделать больше вещей на этапе обратного вызова (например, другая анимация).

Тогда вы просто поместите следующий живой вызов после второго blerg.queue,

Не говоря уже о том, что он имеет дополнительное преимущество, заключающееся в создании некоторой программной тонкости, заключающейся в том, что вся последовательность выполнения определяется до ее запуска, что делает выполнение в значительной степени линейным.

Так что это делает код все еще «как вы думаете, он работает» и заставляет его все еще работать «как вам нужно, чтобы он работал», не беспокоясь о всей асинхронности всего этого. (Что делает код менее глючным и более понятным)

Answer 2

Анимация асинхронная. Таким образом, цикл проходит довольно быстро, начиная с трех анимаций и выводя 1, 2 и 3. Через некоторое время анимация завершается и выдает анимированный х 3. Это объясняет ваш вывод.

Как насчет рекурсии?

do_animation(max_runs, total_runs) {
   log();
   if (total_runs < max_runs) {
       $(foo).animate(..., do_animation(max_runs, ++total_runs));
    }
}

do_animation (3, 0);

Попробуйте и дайте мне знать, как это работает.

Answer 3

Оба эти решения работали как шарм! Спасибо, MDCore и Кент!

Кент, я не совсем понимаю, зачем тебе явно ставить обратный вызов в очередь. Не то чтобы вы не правы - это не работает, если обратный вызов является аргументом для animate () - но мне просто любопытно