尝试以不同的颜色闪烁 div，它们之间有一段时间（不使用 jquery）。该程序在调试器中完美运行，但在运行它时，所有更改发生得太快，用户看不到任何东西。尝试使用 setTimeout 无济于事（可能没有正确使用它）function makeBoard() {var squareNum = 4var selectedcontainer = document.createElement('div')container.id = 'container'document.body.appendChild(container);for (let index = 0; index < squareNum; index++) { squareDiv = document.createElement('div') squareDiv.className = 'square' squareDiv.id = '' + (index + 1) container.appendChild(squareDiv)}selected = document.getElementById('1')selected.classList.add('selected')return selected}function dimSwitch() {var turnCnt = 1var posIndex = 0var selectedDivs = []var tempCnt = 0var tempIndex = 0var timeNum = getMaxPos()while (tempCnt < timeNum) { var posIndex = posArr.indexOf(turnCnt, tempIndex) tempIndex = posIndex + 1 while (posIndex !== -1) { selectedDivs.push(document.getElementById(posIndex + 1 + '')) posIndex = posArr.indexOf(turnCnt, tempIndex) tempIndex = posIndex + 1 } selectDiv(selectedDivs) //After this i would like a small delay turnCnt++ tempCnt++ for (let index = 0; index < selectedDivs.length; index++) { selectedDivs[index].classList.remove('selected') } selectedDivs = []}}function drawMove(currDiv, direction) { var nextDiv currDiv.classList.remove('selected') nextDiv = document.getElementById((parseInt(currDiv.id) + direction)) nextDiv.classList.add('selected') return nextDiv}function selectDiv(divs) {for (let index = 0; index < divs.length; index++) { divs[index].classList.add('selected')}}每当使用延迟或超时时，函数 selectDivs 应该在每次执行之间运行一段时间，它会冻结或正常工作 在我删除 for 循环中的类之前，用户应该能够看到哪些 div 是红色的（“选定”类） .这就是我尝试使用 setTimeout 的方式，但其余代码继续在后台运行，我看到的是所有红色的 div：setTimeout(function(){ for (let index = 0; index < selectedDivs.length; index++) { selectedDivs[index].classList.remove('selected') } },1000)
2 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
您已将循环代码置于 setTimeout 块中，因此整个循环将运行一目了然，但会在 1000 毫秒后运行。如果您希望元素以 1 秒延迟一一出现，您可以将逻辑更改为此，(1000 * index)为每个元素设置不同的超时：
for (let index = 0; index < selectedDivs.length; index++) {
setTimeout(function(){
selectedDivs[index].classList.remove('selected')
}
, (1000 * index)
)
}
萧十郎
TA贡献1815条经验 获得超13个赞
简单的方法是进行递归循环，使用超时来延迟对自身的调用。概念证明如下：
var childDivs = document.querySelectorAll('.child');
function selectDivs(divs, index, delay) {
divs[index].classList.add('selected');
delay = delay || 1000; // if you want to change the delay
index++
if (index < divs.length) {
setTimeout(function() {
selectDivs(divs, index, delay);
}, delay);
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.child {
height: 100px;
width: 100px;
box-sizing: border-box;
background-color: yellow;
border: 1px solid #000;
}
.selected {
background-color: red;
}
<body onload="selectDivs(childDivs, 0)">
<div class="flex-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
我个人会尽可能地使用 CSS，设置一个 CSS 变量来延迟更改。只是为了能够更容易地跟踪 DOM 中发生的事情。
var childDivs = document.querySelectorAll('.child');
function selectDivs(children) {
let child = {};
for (let i = 0; i < children.length; i++) {
child = children[i];
child.style.setProperty('--background-animation-delay', i+'s');
child.classList.add('selected');
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.child {
--background-animation-delay: 0s;
height: 100px;
width: 100px;
box-sizing: border-box;
background-color: #ffff00;
border: 1px solid #000;
transition: background-color 0s var(--background-animation-delay);
}
.selected {
background-color: #ff0000;
}
<body onload="selectDivs(childDivs)">
<div class="flex-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
添加回答
举报
0/150
提交
取消