1

我很难从悬停事件中正确清除计时器功能。我有两个div。他们是兄弟姐妹，下一个兄弟姐妹应该显示在另一个兄弟姐妹的悬停上。我无法确定我在哪里搞砸了，但我发现每次我将鼠标悬停在主要项目上时，它都会使用 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);
  });

});
4

1 回答 1

0

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

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

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

使用布尔值绑定一次。

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

于 2016-02-19T00:51:54.713 回答