js限制用户频繁点击提交处理方法

如果页面上面有一个“提交”按钮，这个点击后会触发比较复杂的业务逻辑或者直接处理DB中的数据，这个时候我们通常不希望用户频繁点击提交或恶意点击，这就需要我们对这个有个时间限制了，比如5s后才能发表评论等等。

 

通过js我们可以比较轻松的实现这个需求：

 

<script type="text/javascript">
    //存储变量信息
    var VAR ={
        repeatTemp:[]
    }

    var COM = {
        repeat:function(s,t){//限制执行频率，默认为60秒 允许执行时返回false
            t = t ? t * 1000 : 60000;//毫秒
            var time = microtime();
                if(!VAR.repeatTemp[s]){
                    VAR.repeatTemp[s] = time;
                    return false;//允许
                }else{
                    var ts = t - (time - VAR.repeatTemp[s]);
                    ts = parseInt(ts/1000);
                if(ts > 0){
                    alert("频率限制：还有 <b>"+ ts +"</b> 秒才可以再执行！");
                    return true;//禁止执行
                }else{

                    VAR.repeatTemp[s] = time;//更新时间
                    return false;//允许
                }
            }
        }
    }


    //刷新
    function ref(){
        var btn = COM.repeat('btn');
        if(!btn){alert("可以执行了！");}else{return;}
    }


    //获取毫秒级时间戳
    function microtime(){

        return new Date().getTime();
    }  

  </script>

 

 

js的实现逻辑就这样几句code，然后我们可以在页面中弄一个测试button

 

<input type="button" id="btn" onclick="ref();" value="提交"/>

 

 

 如果频繁的去点击则会触发警告消息框。