자바 스크립트의 setTimeout + 루프

나는 루프에 일부 사업부의의를 시도하고, 그 코드를 가지고 : 나는에서는 setTimeout없이 시도하고 효과가 동일자바 스크립트의 setTimeout + 루프

var first = ".first"; 
for (i = 0; i < 9999; i++) { 
    setTimeout(function() { 
     $(first).delay(500).animate({ 
      "opacity": "1" 
     }, 1500); 
     $(first).delay(1500).animate({ 
      "opacity": "0" 
     }, 1500); 
     $(".1").delay(4500).animate({ 
      "opacity": "1" 
     }, 1500); 
     $(".1").delay(1500).animate({ 
      "opacity": "0" 
     }, 1500); 

     $(".2").delay(4800).animate({ 
      "opacity": "1" 
     }, 1500); 
     $(".2").delay(1500).animate({ 
      "opacity": "0" 
     }, 1500); 

     $(".3").delay(5300).animate({ 
      "opacity": "1" 
     }, 1500); 
     $(".3").delay(1500).animate({ 
      "opacity": "0" 
     }, 1500); 

     $(".4").delay(5600).animate({ 
      "opacity": "1" 
     }, 1500); 
     $(".4").delay(1500).animate({ 
      "opacity": "0" 
     }, 1500); 

     $(".5").delay(5900).animate({ 
      "opacity": "1" 
     }, 1500); 
     $(".5").delay(1500).animate({ 
      "opacity": "0" 
     }, 1500); 
    }, 6000); 
}

- div의 등장 만 1 루프에서 사라졌다. 다음 루프마다 무작위 순서로 나타납니다. 나는 그 방법이 잘못되었다는 것을 알고 있습니다. 그러나 나는 JavaScript로 초록색입니다. 그리고 그것을 올바르게하는 방법을 모릅니다. 누군가 나를 도울 수 있니?

출처

2013-11-20 Wojtek1150

애니메이션 따라서 그들은 모두 당신을 위해 같은 순간에 작업을 시작, 비동기 적으로 작동합니다. 애니메이션에 전달할 수있는 세 번째 인수가 있습니다. 콜백입니다. 애니메이션을 완료 할 때 무언가 수행하는 익명의 함수입니다. – deb0rian

[함수에 setTimeout을 전달하면 항상 마지막 값을 전달합니까?]과 같은 것을 만들려고합니다. http://stackoverflow.com/questions/6425062/passing-functions-to-settimeout-in-a-loop-always-the-last-value) 및 기타 gazillion –

당신은 어떤 효과를 얻으려고하는지 설명해 줄 수 – Techsin

for 루프는 계속 이벤트를 첨부하고 동일한 요소에 9999 개의 애니메이션을 지연시키지 않기 때문입니다. 그들은 서로에게 두근 거리고 있습니다. 코드는 말이되지 않습니다.

루프에서 코드를 실행하려면 애니메이션 중 하나에서 콜백을 사용하고 완료되면 함수를 호출 할 수 있습니다. 다른 옵션은 간격을 사용하는 것입니다. 그러나 타이밍 이벤트가 정확하지 않고 지저분 해져서 쌓일 수 있습니다.

출처

2013-11-20 18:39:15 epascarello

많은 시간 동안 setTimeout 타이머를 실행하면 요소가 겉으로보기에 무한대로 움직 이도록 만드는 것처럼 보입니다. 이를 위해서는 setInterval()을 사용하여 6 초마다 기능을 실행해야합니다.

그래서, 대신

for (i = 0; i < 9999; i++) { 
    setTimeout(function() { 
     $(first).delay(500).animate({ 
      "opacity": "1" 
     }, 1500); 

     // etc etc 

    }, 6000); 
}

...의 ... 이렇게 :

setInterval(function() { 
    $(first).delay(500).animate({ 
     "opacity": "1" 
    }, 1500); 

    // etc etc 

}, 6000);

(참고 :. 어떤 루프)

데모 : http://jsfiddle.net/57sYA/

출처

2013-11-20 18:42:58 JJJ

'setInterval'을이 목적으로 사용해서는 안됩니다. jQuery가 내부적으로 실행하는 비동기 코드가'setInterval'과 완벽하게 동기화되어 있다고 가정합니다. 이는 매우 드뭅니다. –

@BlueSkies이 경우 왜 그들이 동기화 상태를 유지해야하는지 알 수 없습니다. – JJJ

@BlueSkies'delay()'+ 애니메이션 지속 시간이 대부분의 요소의 간격 길이보다 길어서 의도 한 효과가 망가질 수 있습니다. – JJJ

내 문제의 해결책을 찾았습니다. - setInterval

var licznik=0; 
function show_anim(){ 
     if(licznik!=9999){ 
     $("#first").delay(500).animate({"opacity": "1"}, 1500); 
     $("#first").delay(1500).animate({"opacity": "0"}, 1500); 
     $("#1").delay(4500).animate({"opacity": "1"}, 1500); 
     $("#1").delay(1500).animate({"opacity": "0"}, 1500); 

     $("#2").delay(4800).animate({"opacity": "1"}, 1500); 
     $("#2").delay(1500).animate({"opacity": "0"}, 1500); 

     $("#3").delay(5300).animate({"opacity": "1"}, 1500); 
     $("#3").delay(1500).animate({"opacity": "0"}, 1500); 

     $("#4").delay(5600).animate({"opacity": "1"}, 1500); 
     $("#4").delay(1500).animate({"opacity": "0"}, 1500); 

     $("#5").delay(5900).animate({"opacity": "1"}, 1500); 
     $("#5").delay(1500).animate({"opacity": "0"}, 1500); 
     licznik++; 
     console.log(licznik); 
     } 
    } 

$(document).ready(function(){ 

show_anim() 


setInterval("show_anim()",12000); 
});

데모 : http://jsfiddle.net/D5bxA/

출처

2013-11-21 19:30:59 Wojtek1150

자바 스크립트의 setTimeout + 루프

답변

관련 문제