如何设置回调以运行 *before* jquery 动画？答案

【问题标题】：How can I set up a callback to run *before* a jquery animation?如何设置回调以运行 *before* jquery 动画？
【发布时间】：2010-09-20 09:00:11
【问题描述】：

我正在尝试设置一个循环，其中动画运行一定次数，并且在动画的每次迭代之前运行一个函数。不过，时间最终会关闭——它运行回调 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

在我切换到 jquery 之前，我遇到了 scriptaculous 的这个问题，并发现了一个“beforeSetup”动画回调。有 jquery 等价物吗？

【问题讨论】：

标签： javascript jquery user-interface animation

【解决方案1】：

动画是异步的。所以循环运行得非常快，开始三个动画并输出 1、2 和 3。一段时间后，动画完成并输出动画 x 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);

试一试，告诉我它是如何运行的。

【讨论】：

【解决方案2】：

您也可以尝试使用队列功能。

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); 
 }
});

Kent，我不太明白你为什么需要明确地将回调放在队列。并不是你错了——如果回调是一个参数，它就不起作用 animate() - 但我只是好奇。

第二种情况没有必要，但我认为如果要在回调阶段努力做更多事情（例如，另一个动画），它会使代码更加一致和整洁。

然后你只需将下一个动画调用放在第二个 blerg.queue 之后，

更不用说它还有一个额外的好处，那就是创建一些程序上的精确性，因为整个执行序列是在需要运行之前定义的，从而使执行在很大程度上是线性的。

因此，这使得代码仍然“您认为它如何工作”，并使其仍然“您需要它如何工作”运行，而无需担心这一切的整体异步性。（这使得错误更少，代码更易于维护）

【讨论】：

【解决方案3】：

这两种解决方案都很有效！谢谢 MDCore 和 Kent！

Kent，我不太明白您为什么需要将回调显式放入队列中。并不是你错了——如果回调是 animate() 的参数，它就不起作用——但我只是好奇。

【讨论】：