如何解决setTimeout类列表添加/删除非常不稳定
我想利用setTimeout()
添加和删除类,但是在我当前的实现中,这种行为非常不稳定。见下文:
let topBars = document.querySelectorAll(".bar");
function clearClasses() {
topBars.forEach((bar,i) => {
topBars[i].classList.remove('active-bar')
})
}
function cycleBars() {
topBars.forEach((bar,i) => {
setTimeout(() => {
console.log("the index is: " + i)
clearClasses()
topBars[i].classList.add('active-bar')
},i * 5000)
})
}
if (topBars.length > 1) {
setInterval(cycleBars,5000);
}
.active-bar {
color: red;
background-color: black;
}
<div class="bar active-bar">FISRT</div>
<div class="bar">SECOND</div>
<div class="bar">THIRD</div>
这种行为无处不在,有时甚至有时在跳过。这个想法是让类基于延迟循环而下降,取而代之的是这里的https://travishorn.com/delaying-foreach-iterations-2ebd4b29ad30
这里出了什么问题,怎么似乎前后不一致?
解决方法
这是Scott Marcus在评论中提到的内容的实现:
let topBars = document.querySelectorAll(".bar");
let activeBarIndex = 0;
function cycleBars() {
topBars[activeBarIndex].classList.remove('active-bar');
++activeBarIndex;
if (activeBarIndex >= topBars.length) {
activeBarIndex = 0;
}
topBars[activeBarIndex].classList.add('active-bar');
}
if (topBars.length > 1) {
setInterval(cycleBars,5000);
}
.active-bar {
color: red;
background-color: black;
}
<div class="bar active-bar">FIRST</div>
<div class="bar">SECOND</div>
<div class="bar">THIRD</div>
setInterval()导致每五秒钟调用一次cycleBars()。
,尝试在cycleBars函数中使用setTimeout,这应该可以为您提供解决方案。
如果将cycleBars中的setTimeouts延迟设置为1000ms,它将按预期运行。因此,如果在setInterval和setTimeout上设置了相同的延迟时间,则会连续触发两次,因此会跳过一些数字。
这里:
let delay = 15000;
let topBars = document.querySelectorAll(".bar");
function clearClasses() {
topBars.forEach((bar,i) => {
topBars[i].classList.remove('active-bar')
})
}
function cycleBars() {
topBars.forEach((bar,i) => {
setTimeout(() => {
console.log("the index is: " + i)
clearClasses()
topBars[i].classList.add('active-bar')
},i * (delay/topBars.length))
})
}
if (topBars.length > 1) {
setInterval(cycleBars,delay);
}
理想情况下,您需要在变量中添加以毫秒为单位的延迟,并将该变量附加到setInterval和setTimeout延迟参数上
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。