我很难从悬停事件中正确清除计时器功能。我有两个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 函数 one
与 mouseenter
和 mouseoff 结合使用
事件,有很多方法可以解决这个问题。
使用 $sub.off()
删除以前的处理程序。
https://jsfiddle.net/p2wtonac/2/
使用 bool 值绑定(bind)一次。
关于javascript - 如何在嵌套悬停事件中正确销毁 JavaScript 计时器对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35495184/