节流 & 防抖：JavaScript 中的执行频率控制技巧

2023-10-22 23:20:56

节流与防抖：提升前端应用性能的利器

在快节奏的数字世界中，用户期望应用程序快速、响应迅速。节流和防抖技术应运而生，旨在解决高频事件处理中的性能瓶颈，为用户提供流畅、愉悦的体验。

节流：控制函数执行频率

想象一下，您正在开发一个键盘输入功能。理想情况下，当用户按下某个键时，只会触发一次响应函数。然而，在实际应用中，由于键盘的连按现象，可能会触发多次事件。频繁的函数调用会给系统带来压力，导致性能下降。

节流技术恰到好处地解决了这个问题。它允许您指定一个时间间隔，在该时间间隔内函数只能执行一次。即使事件在时间间隔内被多次触发，函数也不会再次执行，直到间隔结束。这有效地限制了函数的调用频率，防止性能过载。

代码示例：

const throttle = (func, delay) => {
  let timer;
  return function(...args) {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
};

const handleClick = () => {
  console.log('Button clicked!');
};

const throttledHandleClick = throttle(handleClick, 1000);

document.addEventListener('click', throttledHandleClick);

防抖：延迟函数执行

防抖与节流类似，但采用不同的方法。它延迟函数的执行，而不是控制其频率。当事件触发时，防抖函数会启动一个计时器。如果在计时器结束之前没有触发更多事件，则执行函数。

防抖非常适合处理用户输入，例如搜索框输入。用户通常会逐个字符输入，而我们希望只有在用户停止输入一段时间后才执行搜索查询。这可以防止对服务器进行不必要的请求，并提供更流畅的用户体验。

代码示例：

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

const handleSearch = () => {
  console.log('Search query submitted!');
};

const debouncedHandleSearch = debounce(handleSearch, 500);

document.addEventListener('input', debouncedHandleSearch);