Предотвратить бесконечный цикл в JQuery

Question

Должно быть довольно простым.Я хочу, чтобы эта анимация jQuery перестала запускаться после 1 цикла, а не бесконечного цикла.

Это определенно что-то простое, но это код, который мне помогал некоторое время назад, и я не могу для жизнимне понять, почему это зацикливание.

Спасибо.

jsFiddle: http://jsfiddle.net/SFejj/ и код:

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
        function() {
            move(jElem, !bUp, iSpeed);
        }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed);
            }, 
            iTime
        );
    });
});

Answer 1

Просто удалите обратный вызов для анимации, которая вызывала движение еще раз.

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
           opacity: (bUp ? '+' : '-') + '0.1',
           width: (bUp ? '+' : '-') + '=200',
           height: (bUp ? '+' : '-') + '=200'
        },iSpeed
    );
}

Вы делали это раньше

function move(jElem, bUp, iSpeed) {
    jElem.animate(
      {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
         iSpeed,
         function() {                      
            move(jElem, !bUp, iSpeed);   // move will be called at the end of animate recursively
        }
      }
    );
}

Answer 2

У вас есть функция перемещения, рекурсивно вызывающая функцию перемещения.Хороший способ вызвать переполнение стека!

Answer 3

Если вы хотите выполнить цикл 1 раз, просто добавьте переменную, которая увеличивается на 1. Вы можете изменить строку loopTimes < 1, чтобы функция прекратила цикл после любого количества циклов, которое вы хотите.

function move(jElem, bUp, iSpeed, loopTimes) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
                    if(loopTimes < 1)
                    {
                       loopTimes++;
                       function() {
                           move(jElem, !bUp, iSpeed, loopTimes);
                       }
                    }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed, 0);
            }, 
            iTime
        );
    });
});