javascript - 添加/删除一个类，当您将鼠标悬停在父元素上时，所有子元素的时间间隔

Question

有些元素带有子元素，当你悬停时，子元素应该在间隔后添加到类中。

我可以添加能够悬停的类，当我从父类中取出鼠标时，首先将其删除，然后由于某种原因再次添加，我不明白发生了什么事。

$('.field_icon')
  .mouseover(function() {
    $(this).children('.field-item').each(function(i, el) {
      setTimeout(function() {
        $(el).addClass('active');
      }, 100 + (i * 300));
    })
  })
  .mouseleave(function() {
    $(this).children('.field-item').removeClass('active')
  })

.field-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #7CB342;
}
.field-item.active {
  background: #FF9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>

Answer 1

您需要使用 clearTimeout 清除超时间隔在 mouseleave 事件中；

//Declare an empty array to store the timeoutID 
var t = [];
$('.field_icon')
  .mouseover(function() {
    $(this).children('.field-item').each(function(i, el) {

      //store the reference in a variable
      var t1 = setTimeout(function() {
        $(el).addClass('active');
      }, 100 + (i * 300));

      //Push it the array
      t.push(t1);
    })
  })
  .mouseleave(function() {
    //iterate and Clears the delay set setTimeout
    t.forEach(clearTimeout);

    //reset array to  emepty
    t.length = 0;
    $(this).children('.field-item').removeClass('active')
  })

.field-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #7CB342;
}
.field-item.active {
  background: #FF9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>
<div class="field_icon">
  <div class="field-item"></div>
  <div class="field-item"></div>
  <div class="field-item"></div>
</div>