中止 AJAX 请求答案

【问题标题】：Aborting AJAX request中止 AJAX 请求
【发布时间】：2012-04-12 11:46:47
【问题描述】：

我有 AJAX 请求，它从远程文件中获取数据并显示在页面上的 div 中。当用户将鼠标悬停在链接上时，将调用 AJAX 并显示带有数据的 div，当鼠标移出链接时它会消失。 div 会立即显示，但是当鼠标移出时，在将鼠标移出和隐藏 div 之间会有大约 5 秒的延迟。

我认为这与 AJAX 请求阻止隐藏功能有关，因为当我删除 AJAX 请求时，div 立即隐藏。

当鼠标从链接中移除并且无论如何都隐藏 div 时，我可以做些什么来中止、杀死或忽略 AJAX？

这是我目前的代码：

$(function(){

var showPopup = function(){
    $.ajax({
        type: "GET",
        url: "/process.cfm",
        data: "id=" + 1,
        success: function(data){
            $(".profilePopup").html(data);

            if ($(data).find(".profileResult").length) {
                var text = $(data).find(".profileResult").html();
                $(".profilePopup").html(text);
            }
        }
    });

    $(".profilePopup").show();
}

var hidePopup = function(){
    $(".profilePopup").hide();
}

$("#username").mouseover(showPopup);
$("#username").mouseout(hidePopup);
});

【问题讨论】：

标签： jquery ajax

【解决方案1】：

试试这个：

 var xhr = $.ajax({
        type: "POST",
        url: "some.php",
        data: "name=Somename",
        success: function(msg){
           alert( "Data Saved: " + msg );
        }
    });

    //kill the request
    xhr.abort()

【讨论】：

我已将 AJAX 调用分配给一个变量，然后在隐藏弹出窗口之前在 hidePopup() 函数中使用 abort() 将其终止。不幸的是，这并没有解决问题，并且弹出窗口在消失之前仍然“卡住”了至少 5-6 秒。

【解决方案2】：

您可以使用 jxhr 对象中止 ajax 请求：

http://api.jquery.com/jQuery.ajax/#jqXHR

类似这样的：

var jxhr_object = $.ajax({
    url: "some.php",    
    success: function(){
       do something
    }
});

//kill the request
jxhr_object.abort()

【讨论】：

【解决方案3】：

var xhr = $.ajax({
    type: "GET",
    url: "/process.cfm",
    async: true,
    data: "your data",

    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

这不会让您的浏览器冻结。

异步：真，

【讨论】：