Ajax 解决网络延迟用户疯狂点击问题

如果网络变慢请求还没有处理完的话 有的脾气不太好的顾客就会疯狂获取请求但是用户点击了那么多请求要是每个都实现的话这样会很大程度上影响性能所以下面就来解决这个问题吧
话不多说上代码

想一下思路

首先我们定义一个索引让他的值为false然后每次定义对象之后就让他的值为true当结果成功返回时再让他的结果为false当第二次点击的时候我们来判断索引的值看他到底是true还是false true的话就关闭这次请求false就发送请求

首先在在开头的部分定义index的初始值为false 因为第一次点击要让他成功发送请求

var index =false;

给按钮设置点击事件 每点一次index的值就变成true 在定义一个if语句判断一下if的值true的话就关闭这次请求false就发送请求（这注意if判断要放在上面，因为如果用户脾气好只点击一次的话 定义对象之后 index的值为true然后执行判断 就这一次的请求都发不出去了）

if(index==true){
xhr.abort();
}
xhr =new XMLHttpRequest();
index=true;
xhr.open(‘GET’,‘http://127.0.0.1:8006/server’)
xhr.send();

但是用户在请求响应成功之后又点击了一次index的值仍然为true然后请求仍旧发送失败怎么办呢
在判断成功发送的条件下吧index的值变为false就好了 这样下一次又可以重新发送了

xhr.onreadystatechange= function(){
if(xhr.readyState ===4)
{
index=false;
}
else{

成功之后就是这样子的啦

响应成功后再次发送请求

为了模拟延迟响应我们可以在node.js部分设置一个定时器

结束
比努力更可拍的是坚持！加油

本文地址：https://blog.csdn.net/weixin_50736511/article/details/109353085