Ajax 在休假时停止以前的活动

在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（）

---

提前谢谢

中止请求的工作方式如下：

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

事件。 您的代码看起来有点像这样：

$('.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请求不应该太多。

中止请求的工作原理如下：

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

事件。 您的代码看起来有点像这样：

$('.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请求。

Alex的解决方案足够了，但不会中止缓慢的请求。此外，我避免使用插件来处理诸如超时之类的琐事

---

Alex的解决方案足够了，但不会中止缓慢的请求。此外，我避免使用插件来处理诸如超时之类的琐事

---

我已经尝试了abort（），但在mouseleave上使用时出现了“找不到变量req”错误..从事件外部初始化数组或变量，然后在

mouseenter

-事件内部添加请求。我已经尝试了abort（），但得到了“找不到变量req”在mouseleave上使用时出错。初始化事件外部的数组或变量，然后在

mouseenter

-事件内部添加请求。