手把手教你写一次防抖与节流，从此秒懂高阶函数！

前端

2023-12-23 20:06:44

手写一次防抖与节流，就懂了

防抖与节流的基本概念

在计算机科学中，防抖和节流都是用来控制函数执行频率的技术。它们通常用于优化对用户输入的响应，以防止函数被调用得太频繁。

防抖（Debounce）: 就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。这种技术通常用于处理用户输入事件，例如在文本输入框中键入时触发搜索建议功能。

节流（Throttle）：节流函数和防抖函数的主要区别在于节流函数会立即执行，然后在给定的时间间隔内禁止再次执行。它确保函数在给定的时间间隔内只执行一次。这种技术通常用于处理高频事件，例如滚动或调整窗口大小。

防抖和节流的应用场景

防抖的应用场景

当用户在文本输入框中键入时触发搜索建议功能。
当用户滚动页面时触发加载更多内容功能。
当用户调整窗口大小时触发重新布局功能。

节流的应用场景

当用户滚动页面时触发加载更多内容功能。
当用户调整窗口大小时触发重新布局功能。
当用户连续点击按钮时触发发送请求功能。

如何实现防抖和节流

实现防抖

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

实现节流

function throttle(func, wait) {
  let lastCall;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall < wait) {
      return;
    }
    lastCall = now;
    func.apply(this, args);
  };
}