防止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

你有移動功能調用移動功能遞歸。導致堆棧溢出的好方法！

Answer 2

只需刪除正在調用的動畫的回調再移動即可。

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 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 
     ); 
    }); 
});