Создание цепочки анимации jQuery с использованием рекурсии приводит к сбою браузера

Question

Вот основная идея того, что я пытаюсь сделать:

1. Установите для innerHTML DIV какое-либо значение X
2. Анимируйте DIV
3. Когда анимация завершится, измените значение X и повторите N раз

Если я делаю это в цикле, то в итоге происходит то, что анимация происходит асинхронно, цикл завершается, и DIV устанавливается в его окончательное значение, прежде чем анимация сможет запустить для каждого значения X.

Как отмечает этот вопрос , лучший способ решить эту проблему - сделать рекурсивный вызов функции в обработчике обратного вызова для анимации. Таким образом, значение DIV не изменяется до тех пор, пока анимация предыдущего значения не будет завершена.

Это прекрасно работает ... в точку. Если я оживляю несколько этих DIV одновременно, мой браузер перегружается и вылетает. Слишком много рекурсии.

Может кто-нибудь придумать, как сделать это без с использованием рекурсии?

EDIT:

Вот мой код:

• Рекурсия: http://jsfiddle.net/W7aFm/
• setInterval: http://jsfiddle.net/2HYYm/

Answer 1

Используя setInterval, вы должны быть в состоянии сделать что-то вроде следующего. Там нет рекурсии не происходит вообще. (Конечно, этот пример придуман, но должен объяснить концепцию.)

Рабочий пример: http://jsfiddle.net/TNwAZ/1/

HTML

<div id='myDiv' style="position:relative">div</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

1012 * Javascript *

var count = 10;
var duration = 500;

var interval = setInterval(function() { 
                                 $('#myDiv').text(count).animate({left: '+=50'},duration);
                                 count--;      // Decrement count
                                 if(!count) { clearTimeout(interval) }
                           }, duration );​

---

EDIT:

Не знаю, как вы получаете элементы для анимации, но вот пример размещения ссылок на них в массиве и их циклической обработки.

http://jsfiddle.net/TNwAZ/3/

HTML

<div id='myDiv1' style="position:relative">div 1</div>
<div id='myDiv2' style="position:relative">div 2</div>
<div id='myDiv3' style="position:relative">div 3</div>

Javascript

var divArray = ['myDiv1','myDiv2','myDiv3'];

for(var i in divArray) {
    intervalAnimate(divArray[i]);
}

function intervalAnimate(theDiv) {
    var count = 10;
    var duration = 500;

    var interval = setInterval(function() { 
              $('#' + theDiv).text(count).animate({left: '+=50'},duration);
               count--; // Decrement count
               if(!count) { clearTimeout(interval) }
       }, duration );
}

---

EDIT:

Эта версия пропускает цикл for и просто получает коллекцию объектов jQuery и передает их.

http://jsfiddle.net/TNwAZ/5/

HTML

<div id='myDiv1' style="position:relative">div 1</div>
<div id='myDiv2' style="position:relative">div 2</div>
<div id='myDiv3' style="position:relative">div 3</div>​

Javascript

var $divs = $('div[id^=myDiv]');

intervalAnimate($divs);

function intervalAnimate(collection) {
    var count = 10;
    var duration = 500;

    var interval = setInterval(function() { 
              $(collection).text(count).animate({left: '+=50'},duration);
               count--; // Decrement count
               if(!count) { clearTimeout(interval) }
       }, duration );
}

Answer 2

Настройка функции окончания анимации. Если вы хотите выполнить анимацию «N», создайте массив и добавьте в него элементы «N». Каждый раз, когда вы выполняете функцию завершения анимации slice () для одного из элементов массива. Когда он опустеет, тогда все готово, иначе начните следующую анимацию.

Answer 3

Я не проверял этот код, но вы пробовали что-то вроде:

var x = ["one", "two", "three"];
function animate(e, init){
    e.data("index", (init ? 0 : e.data("index") + 1));
    e.html(x[e.data("index")]);
    e.animate({ key: val }, { duration: 500, complete: function(){
        if ($(this).data("index") < x.length - 1) {
            animate($(this));
        }
    }});
}
$(".toAnimate").each(function(){
    animate($(this), true);
});

Конечно, есть рекурсия, но, может быть, вы ничего не исключите? К сожалению, браузер может ограничиться этим. (Хотя я не могу думать о том, почему увеличение .queue("fx") само по себе повлияет на производительность.)

Также могут быть разные значения x для каждого .toAnimate, если вы установите его (x), используя индексированный объект.