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

标签 javascript jquery cleartimeout

我很难从悬停事件中正确清除计时器功能。我有两个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);
  });

});

最佳答案

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

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

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

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

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

关于javascript - 如何在嵌套的悬停事件中正确销毁 javascript 计时器对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35495184/

相关文章:

javascript - Socket.io 指定心跳

来自 MySQL 的 Javascript 数组

javascript - 关于ajax成功的jQuery clearTimeout令人困惑,并且无法清除以前的超时

javascript - 带有 ng-change 的 Angularjs slider

javascript - 获取关闭模态的元素

javascript - 传单javascript - 如何清除标记上的setTimeout?

javascript - 如何正确清除JavaScript的“setTimeout”

javascript - Discord.js如何操作变量以使数组变量更改后显示文本输出

javascript - 在socket.io上获得双重响应

javascript - 如何模拟被测试服务调用的函数的实现?