在mousleave上停止以前的事件

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

我尝试使用.stopPropagation()和.preventDefault()在mouseenter和mouseleave上也.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);?