multiple setTimeout延迟修改CSS

我正在尝试在阅读“for循环内的多个setTimeout调用”和“JavaScript闭合内部循环 - 简单的实例”之后，在实践中关闭和setTimeout。multiple setTimeout延迟修改CSS

在我的html中，我有10个div，每个人都有自己的课程。唯一的区别是backgroundColor。 CSS链接在html中。

我想要做的是在改变div的颜色之前应用延迟：div1/delay/div2/delay .....到目前为止，使用下面的代码，我只能改变所有的div颜色同一时间后，只有一个延迟。

感谢您的帮助，

<pre> 
<!DOCTYPE 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mainCSS.css" title="compact" /> 

<script type="text/javascript"> 

var myVar; // setTimeout 
    var i=0; // index for css rules 

var colorTab = ["red","blue","violet","black","yellow","green","DarkOrange","cyan","coral","silver"]; 
var colorTab = ["red","blue","violet","black","yellow","green","DarkOrange","cyan","coral","silver"]; 


function stop(){ 
clearTimeout(myVar); 
} 

function changeCSS(obj,numColor){ 
obj.style.backgroundColor=colorTab[numColor]; 
alert(numColor); 
} 

function getStyleSheet() { 
    var sheet = document.styleSheets[0]; 
    var j=0;// index for colorTab 

    for(var i=0; i<sheet.cssRules.length-1;i++){ 
     obj=sheet.cssRules[i]; 

     (function(obj,j) { 
      var myVar=setTimeout(function() {changeCSS(obj,j);},500);   
      })(obj,j); 

     if (j==9){ 
      j=0; 
     }else 
      {j=j+1;} 
     } 
} 


</script> 
</head> 
<body > 
<p> 
<button onclick="getStyleSheet()">GO</button><button onclick="stop()">STOP</button> 
</p> 
<div class="animate1" ></div><div class="animate2" ></div><div class="animate3"></div><div class="animate4"></div> 
<div class="animate5" ></div><div class="animate6"></div><div class="animate7"></div><div class="animate8"></div><div class="animate9"></div><div class="animate10"> 
</div> 
</body> 
     </html>

 而CSS：

<pre> 
div.animate1 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: red; 
} 
div.animate2 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: blue; 
} 
div.animate3 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: violet; 
} 
div.animate4 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: black; 
} 
div.animate5 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color:yellow; 
} 
div.animate6 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: green; 
} 
div.animate7 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: DarkOrange; 
} 
div.animate8 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: cyan; 
} 
div.animate9 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: coral; 
} 
div.animate10 { 
    width: 50px; 
    height: 50px; 
    position: ; 
    background-color: silver; 
} 
<code>

来源

2016-08-19 user1426766

你需要以某种方式使这个产业链不是异步。你可以尝试在函数内部为第二个div调用setTimeout，为第一个div处理setTimeout，等等。并不擅长:)也可以使用Promises并使div1Handle.then（div2Handle）。然后... –

你给同一时间为所有的setTimeout。

var myVar=setTimeout(function() {changeCSS(obj,j);},500);

你的代码应该是：

var myVar=setTimeout(function() {changeCSS(obj,j);},500 * i);

来源

2016-08-19 11:08:07

谢谢你的分享。我已经尝试了两种建议的方法，但没有做到！我终于使用递归，它做我想要的工作。以下是代码。我会继续努力。 Thoose嵌套 - 如果 - 其他人是kludge。

JS代码：

 



     /* 
     This script changes the colors of the divs.The colors go up, the  color  of one div is 
    changed with the color of the div coming after the former. One loop is achieved when all the colors 
    ve moved one div up. As there is 10 div in the html, 10 steps (0 to 9) are necessary for one loop. 
    Second goal is to perform as much loop as necessary to have the colors get their initial position. 
    This require 10 loops(0 to 9). */ 


    // index for loops 
    var loop =0;  

    // index for css objects 
    var i=0; 

    // index for steps 
    var step = 0; 

    // index for colorTab 
    var j=1; 

    // Get the styleSheet to work with 
    var sheet = document.styleSheets[0]; 

    // Get the css rule to work with 
    var obj=sheet.cssRules[0]; 


    /* thoose initial values realize the first step of the first loop */ 

    function changeCSS(){ 

       var colorTab = ["red","blue","violet","black","yellow","green","DarkOrange","cyan","coral","silver"]; 

       // perform the changing of color 
       obj.style.backgroundColor=colorTab[j]; 

        // is a loop complete ? 
        if (step == 10){ 

         // are all the 10 loops completed ? 
         if(loop == 9){ 
          // reset 
          loop = 0; 
          j = 1; 
          i = 0; 

          // there are (is) stil loop(s) remaining 
          } else { 
           // next loop 
           loop += 1; 

            if(loop == 9){ 
             j = 0; 
             } else { 
             j = loop +1; 
             } 
           i = 0; 

          } 
        // reset steps numbering as a new loop starts 
        step = 0 ; 

        // in a loop 
        } else { 

          // the last color of the tab is reached, so go on with 
          // the first one 
          if (j == 9){ 
           j = 0; 

           // if not go to the next color 
           }else { 

           j+=1; 
           } 
          // the last div is reached, continue with the first one 
          if (i == 9){ 
           i = 0; 

           // if not, go to the next div 
           }else { 
           i+= 1; 
           } 

         // go to next step  
         step += 1;    
        } 

       // Get positioned to the next div 
       obj = sheet.cssRules[i]; 

       // Recursion on changeCSS with setTimeout 
       setTimeout(changeCSS,50); 

    } // End of changeCSS 

    function init() { 
     'use strict'; 

     // Confirm that document.getElementById() can be used: 
     if (document && document.getElementById) { 
      var buttonGo = document.getElementById('go'); 
      buttonGo.onclick = changeCSS; 
     } 

    } // End of init() function. 

    // Assign an event listener to the window's load event: 
    window.onload = init;

和HTML：

<pre> 
    <!DOCTYPE html> 
    <html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="mainCSS.css"  title="compact" /> 
    </head> 

    <body> 

    <p> 
    <button id = "go" onclick="changeCSS()">GO</button> 
    </p> 
    <div class="animate1" ></div><div class="animate2" ></div><div class="animate3"></div><div class="animate4"></div> 
    <div class="animate5" ></div><div class="animate6"></div><div class="animate7"></div><div class="animate8"></div><div class="animate9">  </div><div class="animate10"> 
    </div> 
    <script src="jsSetTimeout.js"></script> 
    </body> 
    </html> 
</pre>

来源

2016-08-27 15:18:40 user1426766

multiple setTimeout延迟修改CSS

回答

相关问题