前端手写系列-手写防抖,节流函数

本文深入解析了函数防抖和节流两种常见的前端优化技术。防抖技术确保在一系列连续事件触发后,只有最后一个事件在指定延迟时间结束后才会执行回调函数,有效避免了高频事件的过度响应。而节流技术则限制了回调函数在单位时间内的执行次数,确保即使在事件频繁触发的情况下,也只允许一次回调执行,从而显著提高了应用的性能和响应速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

函数防抖:最后一个事件结束后n秒后,再执行回调。如果这n秒内再有事件被触发,则重新开始计时

function debounce(fn, wait) {
  let timer = null;
  return function() {
    const context = this;
    // 如果此时存在定时器,则清掉定时器,重新计时
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(context, arguments);
    }, wait);
  }
}

函数节流:单位时间内,只能有一次回调函数执行,如果在同一个单位时间内某事件被多次触发,只能有一次生效

function throttle(fn, delay) {
  let prev = Date.now();
  return function() {
    const context = this;
    const curr = Date.now()
    if (curr - prev >= delay) {
      prev = curr;
      return fn.apply(context, arguments);
    }
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值