前端防止重复提交

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