美文网首页JavaScript
(节流)js防止重复频繁点击或者点击过快方法

(节流)js防止重复频繁点击或者点击过快方法

作者: Aniugel | 来源:发表于2019-03-30 19:14 被阅读1次

    目前提供了多种方法,喜欢的朋友可以点赞,还有更好的方法可以留言分享。

    1.方法一:用定时器定时,没跑完定时器,点击按钮无效
    <script>
        var isClick = true;
        $("button").on("click",function(){
            if(isClick) {
                isClick = false;
                //事件
                console.log('我被点击了');
                //定时器
                setTimeout(function() {
                    isClick = true;
                }, 1000);//一秒内不能重复点击
            }else{
                 console.log('请勿过快点击');
          }
        });
    </script>
    
    2.方法二:用两次时间差决定点击是否有效——参考地址如下:

    https://www.cnblogs.com/clear93/p/8086374.html

    var lastClick;   
    lockClick(){
        var nowClick = new Date();
        if (lastClick === undefined) {
            lastClick = nowClick;
            return true;
        } else {
            if (Math.round((nowClick.getTime() - lastClick.getTime())) > 500) {
                lastClick = nowClick;
                return true;
            }
            else {
                lastClick = nowClick;
                return false
            }
        }
    }
     
        this.on('click',()=>{
            if (this.lockClick()) {
                //你的函数代码
            }
        })
    
    三.方法三:比如每次点击的时候给按钮一个500毫秒的遮罩闪现来遮盖按钮

    相关文章

      网友评论

        本文标题:(节流)js防止重复频繁点击或者点击过快方法

        本文链接:https://www.haomeiwen.com/subject/vevsbqtx.html