如何通过原生js 实现一个节流函数和防抖函数,写出核心代码,不是简单的思路?

当需要对频繁触发的事件进行节流(throttle)或防抖(debounce)处理时,可以使用原生 JavaScript 实现对应的函数。以下是简单实现节流函数和防抖函数的核心代码:

节流函数(throttle)

function throttle(func, delay) {
  let timer = null;
  let lastTime = 0;

  return function(...args) {
    const currentTime = Date.now();

    if (currentTime - lastTime > delay) {
      func.apply(this, args);
      lastTime = currentTime;
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, args);
        lastTime = currentTime;
      }, delay);
    }
  };
}

防抖函数(debounce):

function debounce(func, delay) {
  let timer = null;

  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}


在上述代码中,func 是要进行节流或防抖的回调函数,delay 是设置的时间间隔。

对于节流函数,它会保证 func 回调函数在指定的时间间隔内最多执行一次。如果在间隔内再次触发,将会重新计时延迟执行。
对于防抖函数,它会在指定的时间间隔后才执行 func 回调函数。如果在间隔内再次触发,会重新计时延迟执行。
这些函数的返回值是一个新的函数,被调用时会触发相应的节流或防抖逻辑,并执行传入的回调函数。

请注意,实际应用中,往往需要将节流函数或防抖函数应用到具体的事件处理函数上面,以实现对相应事件的节流或防抖处理

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值