前端防止重复提交

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)
         }
     }
 }

    <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博客