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

回答

相關問題