我试图在读取＆＃34; for循环中的多个setTimeout调用之后插入pratice闭包和setTimeout＆＃34;和＃34;内部循环的JavaScript闭包 - 简单实用的例子＆＃34;。
在我的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>
And the 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>
答案 0 :(得分：1)
您为所有setTimeout提供相同的时间。
var myVar=setTimeout(function() {changeCSS(obj,j);},500);
您的代码应为：
var myVar=setTimeout(function() {changeCSS(obj,j);},500 * i);
答案 1 :(得分：0)
感谢您的分享。我已经尝试了两种提议的方法，但没有成功！ 我终于使用了递归，它完成了我想要的工作。下面是代码。 我会继续努力。如果 - 其他是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：
{{1}}