Question

在mouseenter上我发出一个AJAX请求，根据悬停的href的title属性获取一些动态文本，并在另一个div中显示它。

这是一个链接列表，当我将它们快速悬停在它们上面时，所有的ajax请求都会完成，并且所有文本会一个接一个地快速显示，直到当前文本显示出来。

如何停止之前调用的请求并阻止我的div中显示每个文字？

这是我到目前为止所得到的：

$('.link').mouseenter(function(e) {

var text = $(this).attr('title');

$('#showtext').show().html('Loading...');

    $.ajax({
    url: '/show.php?text=' + text,
    cache: false,
    success: function(data) {
        $('#showtext').html(data);
    },
    error: function(xhr, ajaxOptions, thrownError){
        $('#showtext').html('Error.');
    }
    });

});

$('.link').mouseleave(function() {
    $('#showtext').hide();
}

我尝试在mouseenter和mouseleave上使用.stopPropagation()和.preventDefault()以及.abort()

提前致谢！

Answer 1

Alex的解决方案已足够，但不会中止缓慢的请求。此外，我避免插件，如超时等琐碎的事情。 jsfiddle

(function($) {
    var request;
    $('.link').bind('updatetext', function() {
        var text = $(this).attr('title');
        $('#showtext').show().html('Loading...');
        request = $.ajax({
            url: '/show.php?text=' + text
            cache: false,
            dataType: 'html',
            success: function(data) {
                $('#showtext').html(data);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                $('#showtext').html('Error finding ' + text);
            }
        });
    });
    var timeout;
    $('.link').mouseenter(function(e) {
        var self = this;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            $(self).trigger('updatetext')
        }, 500);
    });
    $('.link').mouseleave(function() {
        if (request) {
            request.abort();
            request = null;
        }
        $('#showtext').hide();
    });
})(jQuery);

Answer 2

中止请求应该是这样的：

var req = $.ajax({
    url: '/show.php?text=' + text,
    cache: false,
    success: function(data) {
        $('#showtext').html(data);
    },
    error: function(xhr, ajaxOptions, thrownError){
        $('#showtext').html('Error.');
    }
});
//abort
req.abort()

如果使用悬停而不是mouseenter和mouseleave怎么办？当然你会遇到类似的问题。如果你的速度太快，一切都会被加载。因此，我建议你hoverIntent jQuery plugin。仅当鼠标在目标元素上休息几秒钟（可更改）时，才会调用hoverIntent事件。你的代码有点像这样：

$('.link').hoverIntent(function(e) {
    var text = $(this).attr('title');
    $('#showtext').show().html('Loading...');
    $.ajax({
        url: '/show.php?text=' + text,
        cache: false,
        success: function(data) {
            $('#showtext').html(data);
        },
        error: function(xhr, ajaxOptions, thrownError){
            $('#showtext').html('Error.');
        }
    });
},function(e){
    $('#showtext').hide();    
});

因为只有在真的想要时才会触发事件，所以绝不应该有太多的AJAX请求。

在mouseleave上停止以前的事件

2 个答案: