在阅读“for 循环内的多个 setTimeout 调用”和“循环内的 JavaScript 闭包 - 简单的实际示例”后，我尝试将闭包和 setTimeout 付诸实践。
在我的 html 中，我有 10 个 div，每个人都有自己的类(class)。唯一的区别是背景颜色。 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>
<p>And the css :</p>
<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>
最佳答案
您为所有 setTimeout 指定相同的时间。
var myVar=setTimeout(function() {changeCSS(obj,j);},500);
您的代码应该是:
var myVar=setTimeout(function() {changeCSS(obj,j);},500 * i);
关于javascript - 多个setTimeout来延迟CSS的修改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39037193/