DANGER

只针对原生DOM, 如果使用了 bootstrap 等UI框架,需修改!

禁止重复提交

    function repeatTimer(id) {
        var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3000;
        var stamp = document.getElementById(id);
        stamp.disabled = true;
        setTimeout(() => {
            stamp.disabled = false;
        }, timeout);
    }
 
  • 若time==0则表示当前的按钮计时完毕,需要将按钮恢复,并且重新赋值,若!=0则表明当前正在计时,按钮禁用,并且时间time-1

    <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>
    
    <input type="button" id="sub" class="btn btn-primary" onclick="saveForm()" value="下发">

<script>
    var time = 10

    function btnss() {
        if (time == 0) { //重新下发
            $("#sub").attr("disabled", false);
            $("#sub").val("下发");
            time = 10;
            return false; //清除定时器
        } else {
            $("#sub").attr("disabled", true);
            $("#sub").val("重新下发(" + time + ")");
            time--;
            console.log(time)
        }
        //设置一个定时器
        setTimeout(function () {
            btnss()
        }, 1000)
    }


    function saveForm() {
        btnss()
        // todo ...........
    }
</script>
 

这里需要注意的一点是 return false 清除定时器 这里的return的作用是清除计时器,不然的话计时器会一直循环调用