防抖、节流,防止多次点击

/*
*函数防抖 如果事件被触发,清除timer并重新开始计时
*/
export function _debounce(fn, time) {
let timer = null

return function() {
  if (!timer) {
    clearTimeout(timer)
    timer = setTimeout(() => {
        fn.apply(this, arguments)
        timer = null
    }, time)
  }
}

}

/*

  • 函数节流 规定时间内按钮只执行一次
    */
    export function throttle(fn, gapTime) {
    if (gapTime === null || gapTime === undefined) {
    gapTime = 1500
    }
let _lastTime = null

// 返回新的函数
return function () {
  let _nowTime = + new Date()
  if (_nowTime - _lastTime > gapTime || !_lastTime) {
    fn.apply(this, arguments)   // 将this和参数传给原函数
    _lastTime = _nowTime
  }
}

}

### 三级标题:防止多次点击应使用防抖还是节流函数 在用户频繁点击按钮的场景中,为了防止短时间内多次触发相同操作,通常更适合使用 **防抖函数(debounce)**。防抖函数的核心机制是:在事件被触发后,设定一个延迟时间,如果在该时间段内没有再次触发,则执行操作;如果再次触发,则重新计算延迟时间。这种机制非常适合防止多次点击,因为用户连续点击时,只有最后一次点击在延迟时间内未被再次触发才会执行操作 [^4]。 相比之下,节流函数(throttle)是以固定频率执行操作,无论事件触发有多频繁,函数只会按照设定的时间间隔执行一次。这种机制更适合像页面滚动、鼠标移动等需要控制执行频率的场景,而不是用于防止短时间内多次点击 [^3]。 #### 示例代码:使用防抖函数防止多次点击 以下是一个使用防抖函数防止按钮多次点击的示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>防抖函数防止多次点击</title> </head> <body> <button id="btn">点击提交</button> <script type="text/javascript"> var num = 1; const seckill = () => { console.log('我是防抖,你点击了按钮' + num++); }; // 防抖函数 const debounce = (fun, wait) => { let timeout; return function () { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { fun.apply(this); }, wait); }; }; // 获取按钮元素 let btn = document.getElementById('btn'); // 绑定点击事件并使用防抖函数 btn.addEventListener('click', debounce(seckill, 1000)); </script> </body> </html> ``` 在上述代码中,`debounce` 函数确保了按钮点击事件在 1 秒内只会执行一次,即使用户多次点击,只有最后一次点击在 1 秒内未被再次触发时才会执行 [^2]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值