手动取消AJAX重复请求代码问题

<button>点击发送</button>

    <script>

        var btn = document.getElementsByTagName("button")[0]

        //创建变量标识是否在发送AJAX请求

        var isSending = false //默认点击按钮之前没有发送请求

        var xhr = null

        btn.onclick = function(){

            //判断：点击按钮，如果正在发送请求，就取消该请求

            if(isSending){

                xhr.abort()

            }

            xhr = new XMLHttpRequest()

            //创建对象表示正在发送请求

            isSending = true

            xhr.open('GET' , 'http://127.0.0.1:8000/delay')

            xhr.send()

            xhr.onreadystatechange = function(){

                if(xhr.readyState === 4){

                    //进入判断，表示请求结果已经返回

                    isSending = false

                }

            }

        }

    </script>

以上是我写的手动取消AJAX请求的代码，问题是，如果我不在click事件绑定外部定义xhr变量，xhr.abort()就会报错；但是我想不明白的是，这个xhr不需要在事件外部定义的呀，直接var xhr = new XMLHttpResquest不久可以了吗，只有进入if(isStanding)判断，才会执行xhr.abort()，这时候xhr已经被赋值了呀，请大神们指教~~小白在此谢过！

在btn.onclick 事件函数中用var xhr = new XMLHttpResquest()
xhr就是函数中的局部变量，每次点击按钮调用函数，都会声明一个新的xhr变量。
第一次调用函数时的xhr变量与第二次调用函数时的xhr变量不是同一个。
并且变量有声明提升的特性，
var xhr = new XMLHttpResquest()中的var xhr声明在函数执行前会提升到函数中的最前面，变成：
        btn.onclick = function(){
            var xhr;
            //判断：点击按钮，如果正在发送请求，就取消该请求
            if(isSending){
                xhr.abort()
            }
            xhr = new XMLHttpRequest()

 这样在执行xhr.abort()时 xhr的值是 undefined
 

if 语句里面再加一个return 语句应该就可以了

个人感觉是你的var xhr = new XMLHttpResquest可能要放在 if(isSending)上面，可能是二次点击的时候，xhr并未被声明只是个undefind，所以调用不到abort()方法，然后报错

var xhr = new XMLHttpResquest 这样写  你点击时声明提升 xhr.abort()这个xhr是 undefined

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632