我在从悬停事件中正确清除计时器功能时遇到困难。我有两个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);
});
});
问题不是计时器，而是绑定事件处理程序。每次将鼠标移开时，.main-item都将悬停处理程序绑定到.sub-item。您或者需要删除先前的处理程序，或者设置一个布尔值以记住您已绑定了悬停处理程序，或者将jquery函数one与mouseenter和mouseoff事件一起使用，有很多方法可以解决此问题。
使用$sub.off()删除以前的处理程序。
https://jsfiddle.net/p2wtonac/2/
使用布尔值绑定一次。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句