jQuery setTimeout:行上的第一个操作不起作用

jQuery setTimeout: 1st action on the row doesn't work

本文关键字：第一个 操作 不起作用 setTimeout jQuery      更新时间：2023-09-26

在我的小程序中https://jsfiddle.net/Skaidrius/99a48obf/6/您可以按下按钮以显示数组"Seq"中预先写入的一些移动序列（颜色方块将颜色更改为白色并返回）。这是用功能制作的。

setTimeout(fn(){}, time)

控制台.log显示一切正常，但不幸的是颜色变化从 2 个移动开始。

我想我应该更改一些超时设置，但我试图纠正它但没有成功。

在

setTimeout()中使用i+1，因为each()第一个索引从 0 开始。

$(document).ready(function() {
  function series() {
    seq = [1, 2, 3, 1];
    $.each(seq, function(i) {
      var $seq = $('#div' + seq[i]);
      setTimeout(function() { 
        $seq.toggleClass('white');
      }, (i + 1) * 500);
      setTimeout(function() {
        $seq.toggleClass('white');
      }, (i + 1) * 700);
    })
  }
  $('#btn').on('click', series);
})
.div {
  position: relative;
  width: 110px;
  height: 100px;
  background-color: green;
  border: 1px dashed black;
  float: left;
}
.div span {
  position: relative;
  top: 45px;
  left: 45px;
  color: white;
}
.main {
  width: 230px;
}
.white {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='main'>
  <div class="div" id="div1">
    <span>1</span>
  </div>
  <div class="div" id="div2">
    <span>2</span>
  </div>
  <div class="div" id="div3">
    <span>3</span>
  </div>
  <div class="div" id="div4">
    <span>4</span>
  </div>
</div>
<button id="btn">
  Press to wave!!!
</button>

代码中的序列是"seq = [1， 2， 3， 1];"，

但是如果你想从数组中的第一项开始，它不是"seq = [0， 1， 2， 1];"吗？由于数组中的项目是 0 索引的，因此第一个将是 0。

相关文章：