@nicolas
2021-04-09 11:14
采纳率: 66.7%
浏览 69

手动取消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已经被赋值了呀,请大神们指教~~小白在此谢过!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 已采纳

    在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 语句应该就可以了

    点赞 评论
  • 木玄客 2021-04-09 11:57

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

    点赞 评论
  • Proud lion 2021-04-09 11:58

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

    点赞 评论
  • 有问必答小助手 2021-04-09 13:34

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

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

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

    点赞 评论

相关推荐 更多相似问题