jquery - Jquery：防止大规模悬停事件，直到鼠标在元素中 0.5 秒

Question

我有一个使用悬停事件来显示动态区域的菜单项列表。问题在于，当用户在单个菜单项上移动时，每个菜单项都会触发 toggle() 事件，导致在您到达所需的实际菜单元素之前触发大量显示/隐藏事件。

    jQuery(".categoryPopupLink").hover(
            function () {
                    var str = jQuery(this).attr('id');
                    var id  = str.substring(str.indexOf("_") + 1);

                    jQuery (".categoryPopup:visible").toggle (750);

                    jQuery ("#categoryPopup_" + id).toggle (750);
                    return false;
            }
    );

如何修改此代码，以便仅当鼠标在菜单元素上停留特定时间（例如，0.5 秒）时才会触发 toggle() 事件。

Answer 1

尝试这个...

var timeoutID = 0;

jQuery(".categoryPopupLink")
    .on("mouseenter", function () {
        var str = this.id;
        var id  = str.substring(str.indexOf("_") + 1);
        clearTimeout(timeoutID);
        setTimeout(function() {
            jQuery(".categoryPopup:visible").hide();
            jQuery("#categoryPopup_" + id).show();
        }, 500);
    })
    .on("mouseleave", function() {
        clearTimeout(timeoutID);
        jQuery(".categoryPopup:visible").hide();
    });

它应该在显示元素之前暂停 500 毫秒。