揭秘函数防抖与节流：让你的代码如虎添翼

2023-12-22 09:55:39

在前端开发中，我们经常会遇到需要对函数进行优化的情况，函数防抖和节流就是两种非常有效的优化手段。函数防抖可以防止函数在短时间内被多次触发，而节流可以控制函数在一定时间内只执行一次。理解并掌握这两种技术，可以极大地提高代码的性能和用户体验。

函数防抖

函数防抖的原理是，当一个函数在一定时间内被多次触发时，只执行最后一次触发。这对于一些需要在用户操作后才执行的函数非常有用，例如文本框输入时的搜索建议。

实现函数防抖的代码如下：

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

这个函数接收两个参数：要防抖的函数 func 和防抖的时间 wait。当 func 被调用时，它会首先清除上一次的计时器，然后重新启动一个新的计时器。如果在 wait 时间内 func 又被调用，则会再次清除计时器并重新启动。只有当 wait 时间内没有再次调用 func 时，才会真正执行 func。

函数节流

函数节流的原理是，在一定时间内只执行函数一次，即使函数被多次触发。这对于一些需要在一定时间内只执行一次的函数非常有用，例如窗口滚动时的页面加载。

实现函数节流的代码如下：

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

这个函数接收两个参数：要节流的函数 func 和节流的时间 wait。当 func 被调用时，它会首先检查上一次调用 func 的时间 lastCallTime。如果当前时间与 lastCallTime 的差值大于 wait，则会执行 func 并更新 lastCallTime。否则，不会执行 func。