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

您始终可以使用基础承诺和管道：http://jsfiddle.net/72YHh/3/（动画完成后单击正文以重新启动它）。

参考文献：

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

Answer 2

我不知道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 3

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

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

您可以在行动here中看到这一点。

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

3 个答案: