javascript - 如果链接尚未悬停，Jquery 在 jquery post 方法后的弹出窗口中显示信息

Question

如果用户将鼠标悬停在带有 Actor 姓名的链接上，我会弹出 Actor 信息。但是，如果用户将链接悬停得非常快，则通常会同时弹出 2 个链接。是否可以检查链接是否悬停，以便弹出窗口将显示特定链接上的特定信息？这是我的代码

    $('.persons a').mouseenter(function(){
    var url = $(this).attr('href');
    var elem = $(this);

    $('#person_info').remove();

    $.post(
        '/site/get_person_info',
        'url=' + url,
        function(data) {
            if (data != 'error') {

                function show_creator_info(url) {
                    if ($('.persons a:hover').length != 0) {
                        $(elem).append(data);
                    }
                }
                show_creator_info(url);
            }
        }
    );

    $('.persons a').mouseleave(function(){
        $('#person_info').remove();
    });

});

这是一个演示 enter link description herediv“В ролях”

Answer 1

设置一个名为loading的变量来了解您是否正在获取数据，并且如果加载为真，则不再请求。

var loading = false;

$('.persons a').mouseenter(function(){
    if (loading) return;

    var url = $(this).attr('href');
    var elem = $(this);    
    $('#person_info').remove();
    loading = true;
    $.post(
        '/site/get_person_info',
        'url=' + url,
        function(data) {
            if (data != 'error') {
                function show_creator_info(url) {
                    if ($('.persons a:hover').length != 0) {
                        $(elem).append(data);
                    }
                }
                show_creator_info(url);
            }
            loading = false;
        }
    );

    $('.persons a').mouseleave(function(){
        $('#person_info').remove();
    });    
});