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

Question

<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已经被赋值了呀，请大神们指教~~小白在此谢过！

Answer 1

在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