循环内的 DOM 操作发生得太快
尝试以不同的颜色闪烁 div，它们之间有一段时间（不使用 jquery）。该程序在调试器中完美运行，但在运行它时，所有更改发生得太快，用户看不到任何东西。
尝试使用 setTimeout 无济于事（可能没有正确使用它）
function makeBoard() {
var squareNum = 4
var selected
container = 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 = 1
var posIndex = 0
var selectedDivs = []
var tempCnt = 0
var tempIndex = 0
var 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)
牧羊人nacy2回答
-
扬帆大鱼
您已将循环代码置于 setTimeout 块中，因此整个循环将运行一目了然，但会在 1000 毫秒后运行。如果您希望元素以 1 秒延迟一一出现，您可以将逻辑更改为此，(1000 * index)为每个元素设置不同的超时：for (let index = 0; index < selectedDivs.length; index++) { setTimeout(function(){ selectedDivs[index].classList.remove('selected') } , (1000 * index) )} -
萧十郎
简单的方法是进行递归循环，使用超时来延迟对自身的调用。概念证明如下：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>
随时随地看视频慕课网APP
相关分类
JavaScript