如何避免网络延迟带来的多次点击操作接口？

分前端和后端

一、前端

1、button标签点击后变成disabled

<form action="login" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit"BfwOnclick="this.disabled=true; this.value='登录中...'; this.form.submit();" value="登录" />
</form>

2、函数节流

<script>
// 时间戳函数节流方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log(Math.random());
   //ajax请求
}
    
throttle(handle,1000);//一秒内只能触发一次
</script>

<script>
// 定时器函数节流方案
function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function han...

点击查看剩余70%