为什么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/

10-09 20:08