如何将mouseenter与mouseleave函数和Ajax干净地结合使用？

jQuery自带的hover()方法就是专门用来统一处理鼠标移入（mouseenter）和移出（mouseleave）事件的，能让你的代码更精简。改写后的代码如下：

$(function() {
    $("#card_client").hover(
        // 鼠标移入时执行（对应mouseenter）
        function(){
            // 增加可见性判断，避免重复触发AJAX请求
            if(!$("#results").is(":visible")){
                $("#results").load("data/show_card.php").show();
            }
        },
        // 鼠标移出时执行（对应mouseleave）
        function(){
            $("#results").hide();
        }
    );
});

补充说明 #

• hover()的第一个参数是mouseenter触发的回调函数，第二个参数是mouseleave触发的回调函数，逻辑和你原本分开写的完全一致，但结构更紧凑。
• 新增的可见性判断是为了优化体验：如果鼠标快速反复移入移出，不会重复发起AJAX请求，避免不必要的资源消耗。

内容的提问来源于stack exchange，提问作者Nicos