1、用户点击按钮后，使用disable属性，点击后禁用按钮，在请求成功后可再次点击

2、使用loading属性，点击后页面进行加载

3、使用唯一标识，类比UUID

4、使用token（向后端请求该值）

5、使用防抖和节流

防抖：单位时间内根据最后一次点击进行计时去发出请求，延迟单位时间后进行回调，触发多次只 执行最后一次

        常用于登录、验证码请求

示例：

    // 防抖函数

    function debounce(fn, wait) {

        let timer;

        return function() {

            let _this = this;

            let args = arguments;

            if(timer) { clearTimeout(timer) }

            timer = setTimeout(function(){

                fn.apply(_this, args)

            }, wait);      

        }

    }

    // 使用

    window.onresize = debounce(function() {console.log('resize')}, 500)

节流：只取首次点击进行请求，单位时间内只触发一次

        常用于下拉加载

示例：   

// 方式1: 使用时间戳

    function throttle1(fn, wait) {

        let time = 0;

        return function() {

            let _this = this;

            let args = arguments;

            let now = Date.now()

            if(now - time > wait) {

                fn.apply(_this, args);

                time = now;

            }

        }

    }

    

    // 方式2: 使用定时器

    function thorttle2(fn, wait) {

        let timer;

        return function () {

            let _this = this;

            let args = arguments;

            

            if(!timer) {

                timer = setTimeout(function(){

                    timer = null;

                    fn.apply(_this, args)

                }, wait)

            }

        }

    }

<code> <script>

// 1.封装节流函数（使用定时器） 节流重在加锁 timer=timeout

function throttle(fn, time) {

//3. 通过闭包保存一个 "节流阀" 默认为false

let temp = false;

return function () {

//8.触发事件被调用 判断"节流阀" 是否为true 如果为true就直接trurn出去不做任何操作

if (temp) {

return;

} else {

//4. 如果节流阀为false 立即将节流阀设置为true

temp = true; //节流阀设置为true

//5. 开启定时器

setTimeout(() => {

//6. 将外部传入的函数的执行放在setTimeout中

fn.apply(this, arguments);

//7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉

temp = false;

}, time);

}

};

}

function sayHi(e) {

// 打印当前 document 的宽高

console.log(e.target.innerWidth, e.target.innerHeight);

}

// 2.绑定事件，绑定时就调用节流函数

// 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数

window.addEventListener('resize', throttle(sayHi, 2000));

</script>

引用    防抖和节流（详解） 使用场景和区别_防抖节流-CSDN博客