手撸JS合集之防抖节流简明攻略

前端

2023-12-28 22:54:27

手撸JS合集——防抖节流简明攻略

手撸JS，只为更好理解JavaScript的内部机制，打好基础做铺垫，学习JS必撸系列将带来一系列关于JavaScript的从基础到进阶的干货。

什么是防抖和节流？

防抖（debounce）和节流（throttling）都是用来优化JavaScript事件处理的常见技术。它们都有助于提高应用程序的性能，特别是在处理快速发生的事件时。

防抖会在一一段时间内只触发一次事件。这对于防止重复的事件处理程序被触发非常有用，例如当用户快速输入文本时，或者当用户滚动页面时。
节流会在一定时间内只触发一定次数的事件。这对于限制事件处理程序被触发的次数非常有用，例如当用户连续点击按钮时，或者当用户移动滑块时。

如何实现防抖和节流？

防抖和节流都可以使用JavaScript的setTimeout()和clearTimeout()方法来实现。

防抖

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function () {
    const args = arguments;
    const context = this;
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

节流

// 节流函数
function throttle(func, wait) {
  let last = 0;
  return function () {
    const now = Date.now();
    if (now - last < wait) {
      return;
    }
    last = now;
    func.apply(this, arguments);
  };
}