js 多次点击按钮后避免重复提交

js 多次点击按钮后避免重复提交

1.有时可能因为网速原因，也有可能是个人原因，造成了多次点击按钮的情况，以致于后台多次提交，生成了多条重复的数据。

2.这里常用的方法是点击按钮后禁用

var button = document.getElementByid('myButton');
button.disabled = true; 

3.但是这样后台就不会继续执行了。然后我们发现<asp:Button>按钮有一个属性UseSubmitBehavior="false"，这样button type将变成“button”，而不是默认的“submit”；

<asp:Button ID="btnSava" runat="server" Text="保存"     UseSubmitBehavior="false"   OnClientClick="ChkForm();" Visible="false" OnClick="dclick" />

4.但是这样，如果是有别的需要验证的时候还是会出现问题，小编就是出现了一直提示需要上传附件的弹框，明明已经上传附件了。

5.所以我们干脆在js写方法，用时间去控制。

 

    /*w防止重复点击 */
    var clickTimer = 0

    function dclick() {
        var interval = 3000;//3秒钟之内重复点击只拿一次点击
        var now = +new Date(); // 获当前时间时间戳
        var timer = clickTimer; // 记是触发件的件翻
        if (now - timer < interval) {
            //如当前时间  触发事件时的事件  interVal，那么不符合条件，直return false.
            // 不让当前事件继续执行下去
            console.log(1);
            return false;
        } else {
            //反之，记录符合条件触发了事件的时间戳，并 return true，使事件继续往下执行
            clickTimer = now;
            console.log(clickTimer);
            return true;
        }
    }

 

6,这样不管快速点击按钮多少次，都只会执行一次。不会出现重复保存数据的情况。

 

本文链接：https://www.cnblogs.com/yifeixue/articles/17669718.html

备注：创作不易，如转载文章，请注明出处，谢谢！