在没有回调的情况下链接多个 jquery 事件

Question

我想将未知数量的事件串在一起。基本上，我是从一个长数组中得到它们的。我正在使用 CoffeeScript 和 jquery。目前，我有：

function recursive(){
  if (arr.length>0)
     item = arr.shift()
     stander.animate({
        left: 100,
 },{
    duration: 100,
    complete: => @recursive
     })
}

但是我的堆栈跟踪变得非常长而且令人困惑。如果我尝试使用 while 循环，则所有数组元素都会一次全部运行。

while (arr.length>0 && previousAnimationEnded <- PSEUDO CODE)
     item = arr.shift()
     stander.animate({
        left: 100,
     },{
        duration: 100,
     })
}

这将防止进行如此长的堆栈调用。我的问题是，除了回调之外，jQuery、js 或 CoffeeScript 是否是链接动画事件的更明智的方式？

Answer 1

我不知道 CoffeeScript，但是在 JS 中，你可以这样做，而且你不会有堆积的堆栈跟踪。堆栈不堆积的原因是因为动画是异步的，所以对 runArray() 的调用和对 next() 的调用立即完成，并且只有在动画完成后（通过某种计时器）才调用完成函数因此再次调用next()。因此，尽管代码似乎在递归调用自身，但实际上并非如此，并且没有累积堆栈帧。

function runArray(arr){

    function next() {
       if (arr.length > 0) {
          arr.shift().animate({left: 100}, 100, next);
       }
    }

    next();
}

在一个更简单的示例中，堆栈帧也不会在此处累积：

var i = 0;

function go() {
    if (i++ < 1000) {
        item.innerHTML = i;   // any operation goes here
        setTimeout(go, 100);  // run this function again 100ms from now
    }
}
go();

Answer 2

您可以将动画延迟数组位置的倍数：

$("div").each(function(i) {$(this).delay(i * 1000).animate({"left": "+=100"})});

你可以在here看到这个。

Answer 3

您始终可以使用底层的 Promise 和管道：http://jsfiddle.net/72YHh/3/（动画完成后单击主体以重新启动它）。

参考资料：

• jQuery.fn.promise：http://api.jquery.com/promise/
• deferred.pipe:http://api.jquery.com/deferred.pipe/