Javascript 当发送新的AJAX请求时，如何取消该请求？

我知道以前也有人问过类似的问题，但尽管读了很多，我还是没能解决我的问题

我正在创建用户名输入，并使用AJAX从服务器检索响应，具体取决于用户名是否已被使用

我的JavaScript代码：

var定时器=null；
var passed4Before=假；
var xhttp=null；
var ajaxInProgress=假；
var username=document.getElementById（“用户名”）；
username.onkeyup=函数（e）{
//检查数据库中是否存在用户名
函数usernameExists（值）{
如果（按键匹配（/[a-z0-9-|]/gi）| e.which==8 | e.which==46）{
清除超时（计时器）；
ajaxInProgress=true；
计时器=设置超时（函数（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“div”）.innerHTML=xhttp.responseText；
}
};
open（“POST”，“php.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhttp.send（“用户名=”+值）；
}, 1500);
}
};
如果（this.value.length>=4）{
//检查用户是否键入了以上4个字符
passed4Before=true；
}
//在AJAX请求启动时中止该请求的尝试失败
//结果：AJAX根本不起作用
如果（ajaxInProgress）{
xhttp.abort（）；
ajaxInProgress=假；
}
如果（此.value.length<4）{
如果（在之前通过4次）{
console.log（“用户名不能少于4个字符”）；
passed4Before=false；
//停止上一次按键的ajax请求（如果尚未启动）
清除超时（计时器）；
}
}否则{
usernameExists（this.value）；
}
};

我100%确信我必须以某种方式使用xhttp.abort（），但我还没有发现

我使用ajaxInProgress变量来确定是否存在活动的AJAX请求，如果存在，当我再次键入时，它必须停止并检查输入的新值

当前形式的代码无法实现这一点，但它要么从不发送AJAX请求，要么发送一个请求，然后停止

我更喜欢没有任何第三方插件的JavaScript解决方案。任何帮助都将不胜感激。

[已解决]（包括吉拉德·阿尔茨的回答）： 对于将来可能需要此功能的任何人，这里是编辑后的功能：

function usernameExists(value) {
    if (keypressed.match(/[a-z0-9-_]/gi) || e.which === 8 || e.which === 46) {
        if (xhttp) {
            xhttp.abort();
        }
        xhttp = new XMLHttpRequest();
        clearTimeout(timer);
        timer = setTimeout(function() {
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState === 1) {
                    document.getElementById("loader1").innerHTML = "<img src = \"../../Content/Images/ajax-loader.gif\"/>";
                }
                else if (xhttp.readyState === 4 && xhttp.status === 200) {
                    document.getElementById("loader1").innerHTML = "<img class = \"invisible\" src = \"../../Content/Images/ajax-loader.gif\"/>";
                    document.getElementById("tip1").innerHTML = xhttp.responseText;
                    if (xhttp.responseText.indexOf("unavailable") > 0) {
                        username_label.style.color = "red";
                    }
                    else {
                        username_label.style.color = "green";
                    }
                }
            };
            xhttp.open("POST", "Register.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("username=" + value);
        }, 1500);
    }
};

函数usernameExists（值）{
如果（按键匹配（/[a-z0-9-|]/gi）| e.which==8 | e.which==46）{
if（xhttp）{
xhttp.abort（）；
}
xhttp=newXMLHttpRequest（）；
清除超时（计时器）；
计时器=设置超时（函数（）{
xhttp.onreadystatechange=函数（）{
if（xhttp.readyState==1）{
document.getElementById（“loader1”）.innerHTML=“”；
}
else if（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“loader1”）.innerHTML=“”；
document.getElementById（“tip1”）.innerHTML=xhttp.responseText；
如果（xhttp.responseText.indexOf（“不可用”）>0）{
用户名\u label.style.color=“红色”；
}
否则{
username\u label.style.color=“绿色”；
}
}
};
open（“POST”，“Register.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhttp.send（“用户名=”+值）；
}, 1500);
}
};

您应该保留对活动的

XMLHttpRequest

的引用，如果您启动了一个新的请求，请对上一个请求使用

中止

方法

更具体地说，在代码中，在顶部声明

xhtp

变量，而不是在

setTimeout

回调中，并且在创建新的XHR（

xhtp=new-XMLHttpRequest（）；

）之前，只需中止上一个变量（如果存在）：

if (xhttp) {
    xhttp.abort();
}
xhttp = new XMLHttpRequest();

---

您应该保留对活动的

XMLHttpRequest

的引用，如果您触发了一个新的请求，请对上一个请求使用

abort

方法

更具体地说，在代码中，在顶部声明

xhtp

变量，而不是在

setTimeout

回调中，并且在创建新的XHR（

xhtp=new-XMLHttpRequest（）；

）之前，只需中止上一个变量（如果存在）：

if (xhttp) {
    xhttp.abort();
}
xhttp = new XMLHttpRequest();

这里创建的是局部变量xhttp（使用var关键字）。在这里删除var关键字

var xhttp=new-XMLHttpRequest（）

并验证xhttp变量

// AN ATTEMPT TO ABORT THE AJAX REQUEST WHILE IT HAS STARTED THAT HAS FAILED
  // RESULT: THE AJAX DOESN'T WORK AT ALL
  if (ajaxInProgress && xhttp) {
    xhttp.abort();
    ajaxInProgress = false;
  }

这里创建的是局部变量xhttp（使用var关键字）。在这里删除var关键字

var xhttp=new-XMLHttpRequest（）

并验证xhttp变量

// AN ATTEMPT TO ABORT THE AJAX REQUEST WHILE IT HAS STARTED THAT HAS FAILED
  // RESULT: THE AJAX DOESN'T WORK AT ALL
  if (ajaxInProgress && xhttp) {
    xhttp.abort();
    ajaxInProgress = false;
  }

---

你就是那个叫吉拉德的人。我不知道你还会回答我多少问题。以45分钟为例，代表：）你就是吉拉德的真命天子。我不知道你还会回答我多少问题。以45分钟为例：）