的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 +循环

回答

相关问题