如果鼠标位于元素内，则延迟mouseenter事件并引发事件

我使用基于jQuery开发的这个选项卡视图：

https://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html#

我通过mouseenter事件更改选项卡更改的代码。 我想延迟执行mouseenter事件，所以如果鼠标进入elemnt并在那里停留一段时间， mouseenter执行其他操作（如果鼠标在时间之外的时间少于那部分时间） mouseenter不执行。我写这段代码：

 $(document).ready(function () { $('a.tab').on('mouseenter', function () { var thisElement = $(this); setTimeout(function () { $(".active").removeClass("active"); thisElement.addClass("active"); $(".content").slideUp(); var content_show = thisElement.attr("title"); $("#" + content_show).slideDown(); }, 300); }); }); 

但是，如果我把鼠标从鼠标中移出，请问如何解决这个问题？

谢谢

Answer 1

您需要存储超时句柄并在mouseleave上取消它：

 var timeout; $(document).ready(function () { $('a.tab').on('mouseenter', function () { var thisElement = $(this); if (timeout != null) { clearTimeout(timeout); } timeout = setTimeout(function () { $(".active").removeClass("active"); thisElement.addClass("active"); $(".content").slideUp(); var content_show = thisElement.attr("title"); $("#" + content_show).slideDown(); }, 300); }); $('a.tab').on('mouseleave', function () { if (timeout != null) { clearTimeout(timeout); timeout = null; } }); });