【AJAX学习笔记六】ajax取消重复请求

ajax取消重复请求

当我们发送点击按钮发送请求时，每点击一次就会给服务器端发送一次请求。试想：如果我们连续多次甚至无限点击，那么服务器每次都会对每个点击请求进行响应，这就会增大服务器端的压力，甚至会导致性能下降，那么我们如何来解决这个问题呢？

1、问题：当我们点击事件触发请求时，我们希望，每次只发送最后一次请求，而取消前面的所有请求的，也就是只执行最后一次点击触发的向服务器端请求数据。

2、解决：所以我们引入了一个标志位来实现这个功能。

const btn = document.getElementsByTagName('button');
    let x = null;
    let flag = false;///判断是否已经发送AJAX请求的标志位
    btn[0].onclick = function () {
      //当点击事件时判断标志位 如果已经正在发送请求，就取消发送请求
      if (flag) x.abort();
      x = new XMLHttpRequest();
      //修改标志位的值
      flag = true;
      x.open('GET', 'http://127.0.0.1:8000/delay');
      x.send();
      x.onreadystatechange = function () {
        if (x.readystate === 4) {
          //当响应全部返回时 修改标志位
          flag = false;
        }
      }
    }

3、结果：通过标志位的设置，可以让我们第二次点击事件的时候，取消前一次的发送请求。

测试如下：

因为在学习这部分内容时，我个人觉得这种取消重复方式的情况很像是防抖操作，但是又听说他叫节流阀，等我在继续了解一下，会记录一下防抖和节流阀的区别。