什么是防抖和节流?应该如何实现?

防抖(Debounce)

防抖是一种技术,它可以让一个函数在一段时间内只执行一次,即使在这个时间段内触发了多次。这通常用于处理用户输入事件,例如当用户在输入框中输入时,我们不想在每次按键时都触发搜索,而是在用户停止输入一段时间后才触发。

实现防抖的常用方法是使用计时器。当函数被触发时,我们启动一个计时器。如果在计时器结束之前函数再次被触发,则重置计时器。只有当计时器结束时,函数才会被执行。

以下是一个用 JavaScript 实现防抖的示例:

function debounce(func, wait) {
  let timer;
  return function() {
    clearTimeout(timer); // 清除计时器
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait); // 创建计时器,在wait设置的时间后执行操作,这样当在wait设置的时间内函数被调用的话原函数不会触发
  };
}

节流(Throttle)

节流是一种技术,它可以让一个函数在一段时间内只执行一次,即使在这个时间段内触发了多次。与防抖不同的是,节流会在第一次触发时立即执行函数,然后在一段时间内禁用该函数,直到这段时间结束。这通常用于处理高频事件,例如窗口滚动或鼠标移动。

实现节流的常用方法也是使用计时器。当函数被触发时,我们启动一个计时器。如果在计时器结束之前函数再次被触发,则函数会被忽略。只有当计时器结束时,函数才会再次执行。

以下是一个用 JavaScript 实现节流的示例:

function throttle(func, wait) {
  let isThrottled = false;
  return function() {
    if (!isThrottled) {
      func.apply(this, arguments); // 第一次触发立即执行
      isThrottled = true;
      setTimeout(() => {
        isThrottled = false;
      }, wait); // 一段时间后再将isThrottled设为false,这样原函数可以继续触发
    }
  };
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值