为什么setTimeout在for循环中不起作用?我试图一次将一个类添加到每一帧,每三秒钟我需要将其从当前帧中删除,然后将其添加到下一帧。当到达第6帧时,我需要等待十秒钟才能删除该类。然后,我需要全部重复。但是它只是立即将类添加到它们中,然后不删除它们。
for(i = 1; i < 6; i++){
jQuery('.frame-'+i).addClass('color');
if(i < 6){
setTimeout(function(){
jQuery('.frame-'+i).removeClass('color');
}, 3000);
}else if(i = 6){
setTimeout(function(){
jQuery('.frame-'+i).removeClass('color');
i = 1;
}, 10000);
}
}
.color{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame-1">one</div>
<div class="frame-2">two</div>
<div class="frame-3">three</div>
<div class="frame-4">four</div>
<div class="frame-5">five</div>
<div class="frame-6">six</div>
最佳答案
您的代码有2个问题。首先,您希望超时在创建下一个超时之前执行,这是错误的。您正在同时创建它们。其次,您要在超时内重用i
变量,因此当它们触发时,所有变量均为6。
但是,您可以创建一个递归函数来处理所有这些,如下所示...
function timeoutHandler(i) {
// if no value is passed, set i = 1
if (!i) i = 1;
// if i < 6 then create a setTimeout for 3 seconds
// when we remove the class and call the function again with i + 1
if (i < 6) {
setTimeout(function() {
$(".frame-" + i).removeClass("color");
timeoutHandler(++i);
}, 3000);
}
// else (i == 6) setTimeout for 10 seconds
// when we remove the class and stop
else {
setTimeout(function() {
$(".frame-" + i).removeClass("color");
}, 10000);
}
}
// add class to initialise - should really do this in html
for(i = 1; i < 7; i++) {
$(".frame-" + i).addClass("color");
}
// start
timeoutHandler();
.color{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame-1">one</div>
<div class="frame-2">two</div>
<div class="frame-3">three</div>
<div class="frame-4">four</div>
<div class="frame-5">five</div>
<div class="frame-6">six</div>
关于javascript - 在for循环中使用setTimeout,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48641296/