Question

为什么setTimeout在for循环中不起作用？我试图一次一个地将一个类添加到每个帧中，每三秒钟我需要将它从当前帧中删除并将其添加到下一个帧中。当它到达第6帧时，我需要等待10秒才能删除该类。然后我需要重复一遍。但它只是直接将它们添加到它们中，然后不删除它们。

＆＃13;

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);
    }  
}

＆＃13;

.color{
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 1

您的代码有2个问题。首先，您希望在创建下一个超时之前执行超时，这是错误的。您可以同时创建所有这些内容。其次，你在超时内重复使用i变量，所以当他们为所有这些变量发射它时，它就是6。

但是，您可以使用递归函数来处理所有这些，例如......

＆＃13;

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();

＆＃13;

.color{
  color: red;
}

＆＃13;

<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>

＆＃13;

在for循环中使用setTimeout

1 个答案: