Цепочка нескольких событий jquery без обратных вызовов - PullRequest
Новая
       8

Цепочка нескольких событий jquery без обратных вызовов

2 голосов
/ 31 марта 2012

У меня есть неизвестное количество событий, которые я хочу связать вместе. По сути, я получаю их из длинного массива. Я использую 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 более разумным способом связать анимационные события, кроме обратных вызовов?

Ответы [ 3 ]

3 голосов
/ 31 марта 2012

Вы всегда можете использовать базовое обещание и канал: http://jsfiddle.net/72YHh/3/ (нажмите на тело после завершения анимации, чтобы перезапустить его).

Ссылки:

1 голос
/ 31 марта 2012

Я не знаю 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();
0 голосов
/ 31 марта 2012

Вы можете задержать анимацию, кратную позиции массива: 

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

вы можете увидеть это в действии здесь .

...