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

Question

我使用基于jQuery开发的这个标签视图：

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

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

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;
        }
    });
});