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

호출 한 애니메이션의 콜백을 다시 제거하면됩니다. 당신이 그것을 루프 1 시간을 원하는 경우

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

당신은 당신은 기능 정지가 어떤 후에 반복 할 줄 loopTimes < 1을 변경할 수 있습니다 1 씩 증가 변수를 추가,

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

전에이 일을했다 원하는 루프의 수.

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