实现用户多次点击按钮减少触发频率

  • 场景:用户多次点击一个按钮频率过高时,这个点击事件需要传递参数。
  • 通过函数节流的方式减少触发的频率。
  • 代码如下:
<button class="btn">点击按钮</button>
            var btn = document.getElementsByClassName('btn')[0]
            btn.onclick = throttle(handelClick('123'),2000,['1','2','3'])

            function handelClick(params1,params2,params3){
                    console.log('传递的参数-',params1,params2,params3) //传递的参数-1 2 3
            }

            /* 
            callback函数
            wait毫秒内重复点击只会执行一次
            params 函数中需要传递的参数
            */
            function throttle(callback, wait , params) {
                var lastTime = 0;
                return function () {
                    var nowTime = new Date().getTime();
                    if (nowTime - lastTime > wait) {
                        // parms需要传递的参数[]
                        callback.apply(this,params);
                        lastTime = nowTime;
                    }
                }
            }

学习阶段,如有不对和不足,欢迎大家交流。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值