的JavaScript的setTimeout +循環

我嘗試循環一些div的，並且我有代碼：的JavaScript的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); 
}

我嘗試沒有setTimeout和作用是相同的 - 是的div出現，只有在第一環消失。在下一個循環中，它們以隨機順序出現。我知道，這種方法是錯誤的，但我用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

的JavaScript的setTimeout +循環

回答

相關問題