函数之美：优雅封装防抖和节流函数

前端

2023-01-03 21:00:22

控制函数执行频率：防抖与节流

在 JavaScript 应用中，我们经常需要管理函数执行的频率，以防止意外的重复执行或优化性能。两种常用的技术是防抖和节流。了解这两者的区别以及如何使用它们对于编写更健壮、更有效的代码至关重要。

防抖：只触发一次

防抖函数的作用类似于防震装置，它通过在特定时间间隔内接收连续触发时，只执行函数一次。这个时间间隔由延迟值决定。这对于防止用户在快速输入或单击时触发同一操作非常有用。

节流：控制执行频率

另一方面，节流函数的工作方式就像水龙头，它允许函数在特定时间间隔内只执行一次，无论触发频率如何。这对于防止函数在短时间内被重复执行非常有用，例如在处理大量数据或连续的动画。

封装：简单方便的使用

我们可以使用闭包来封装防抖和节流函数，闭包可以保存函数的内部状态。这提供了方便的方法来创建和使用这些函数。

防抖函数封装：

function debounce(fn, delay) {
  let timer;
  return function () {
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

节流函数封装：

function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    const args = arguments;
    const now = Date.now();
    if (now - lastTime > delay) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

示例：理解应用

让我们通过一个示例来理解这两个函数的应用：

// 防抖函数示例：每 500 毫秒只打印一次 "debounce"
const debouncedFunction = debounce(() => {
  console.log('debounce');
}, 500);

// 连续触发 debouncedFunction，但只打印一次
for (let i = 0; i < 10; i++) {
  debouncedFunction();
}

// 节流函数示例：每 500 毫秒打印一次 "throttle"
const throttledFunction = throttle(() => {
  console.log('throttle');
}, 500);

// 连续触发 throttledFunction，每 500 毫秒打印一次
for (let i = 0; i < 10; i++) {
  throttledFunction();
}