javascript - 如何在嵌套悬停事件中正确销毁 JavaScript 计时器对象？

Question

我很难从悬停事件中正确清除计时器功能。我有两个div。他们是 sibling ，下一个 sibling 应该在另一个 sibling 悬停时显示。我无法确定我在哪里搞砸了，但我发现每次我将鼠标悬停在主项目上时，它都会使用 setTimeout 创建一个全新的计时器。因此第一次迭代工作正常，第二次悬停将触发两次，依此类推。

    .main-item {
      width: 300px;
      height: 100px;
      background: #000;
    }

    .sub-item {
      display: none;
      width:450px;
      height: 75px;
      background: red;

      &.open {
        display: block;
      }

    }



    <div>
      <div class="main-item">
      </div>
      <div class="sub-item"></div>
    </div>

    var timer;

    $('.main-item').hover(function() {
      var $this = $(this);
      var $sub = $this.next();

      $sub.addClass('open');

}, function() {
  var $this = $(this);
  var $sub = $this.next();

  $sub.hover(function() {
    var $this = $(this);
    clearTimeout($this.data('timerId'));
    timer = null;

    console.log(timer);

  }, function() {
    var $this = $(this);
    timer = setTimeout(function() {
      $this.removeClass('open');
      alert('this triggered');
    }, 2000);
    $this.data('timerId', timer);
  });

});

Answer 1

问题不在于计时器，而在于绑定(bind)事件处理程序。每次将鼠标移开 .main-item 时，都会将悬停处理程序绑定(bind)到 .sub-item。您需要删除以前的处理程序，或者设置一个 bool 值以记住您已经绑定(bind)了悬停处理程序，或者将 jquery 函数 one 与 mouseenter 和 mouseoff 结合使用事件，有很多方法可以解决这个问题。

使用 $sub.off() 删除以前的处理程序。

https://jsfiddle.net/p2wtonac/2/

使用 bool 值绑定(bind)一次。

https://jsfiddle.net/p2wtonac/3/