节流与去抖：两个控制函数调用速率的小技巧

前端

2023-12-21 05:41:21

节流与去抖：优化函数调用的两大利器

引言

在现代的 Web 开发中，性能优化至关重要。其中，控制函数调用的速率是一个关键方面。节流和去抖就是两大功能强大的函数装饰器，可以帮助我们实现这一目的。本文将深入探讨节流和去抖的原理、区别、代码示例和实际应用，助你全面掌握这两项利器。

节流：防止过快调用

想象一下，你在滚动一个网页，滚动条不断触发一个事件处理函数。如果这个函数执行一些繁重的操作，就会导致页面卡顿。节流函数通过强制一个函数在一定时间内只执行一次来解决这个问题。

当函数被调用时，节流函数会检查上一次调用是否发生在设定的时间间隔内。如果是，函数将不会执行。否则，函数将被执行，并且时间戳将被重置。

代码示例：

// 定义一个节流函数
const throttle = (fn, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime >= delay) {
      lastCallTime = now;
      fn(...args);
    }
  };
};

// 使用节流函数包装一个滚动事件监听器
const handleScroll = throttle(() => {
  console.log('滚动事件被触发');
}, 100);

// 绑定滚动事件监听器
window.addEventListener('scroll', handleScroll);

去抖：抑制重复调用

现在考虑另一个场景，你正在输入一个文本框。每次输入都会触发一个事件处理函数，可能进行一些验证或自动补全操作。如果输入速度过快，可能会导致函数多次调用，造成不必要的计算。

去抖函数通过调节在一个时间间隔内可以调用函数的最大次数来解决这个问题。当函数被调用时，它会设置一个计时器。如果在计时器到期之前函数再次被调用，计时器将被重置。只有当计时器到期时，函数才会被执行。

代码示例：

// 定义一个去抖函数
const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

// 使用去抖函数包装一个输入框输入事件监听器
const handleInput = debounce(() => {
  console.log('输入框输入事件被触发');
}, 500);

// 绑定输入框输入事件监听器
const input = document.getElementById('input');
input.addEventListener('input', handleInput);