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

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

我通过

mouseenter

事件更改选项卡更改的代码。我想延迟执行

mouseenter

事件，因此如果鼠标进入元素并在其中停留一段时间

mouseenter

执行else（如果鼠标在时间上超出该部分时间）

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

但是如果我把鼠标从元素

mouseenter

中取出，这个问题怎么解决呢

---

谢谢

您需要存储超时句柄并在

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