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

JS 2017-10-13

如果页面上面有一个“提交”按钮,这个点击后会触发比较复杂的业务逻辑或者直接处理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="提交"/>

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


本文由 aexus 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论