揭秘防抖和节流的实现原理，让你轻松驾驭用户交互

2023-11-03 22:12:12

防抖：避免函数频繁调用

当你在处理用户输入时，如搜索框输入、滚动条滚动等，如果每次输入或滚动都会触发函数调用，很容易造成函数被频繁调用，从而导致性能问题。防抖可以解决这个问题，它通过延迟函数的执行，直到用户停止输入或滚动一段时间后才真正执行函数。

实现原理

防抖函数内部通常使用计时器来实现延迟执行。当函数第一次被触发时，会启动一个计时器，如果在计时器到期之前函数再次被触发，则重新启动计时器，如此反复，直到计时器到期后才真正执行函数。

代码示例

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

在这个例子中，我们使用setTimeout函数来实现计时器。当函数第一次被调用时，timer变量被设置为一个计时器ID。如果在计时器到期之前函数再次被调用，clearTimeout函数会取消之前的计时器，并重新启动一个新的计时器。直到计时器到期后，func函数才被真正执行。

节流：限制函数执行频率

与防抖不同，节流函数会限制函数在指定的时间间隔内最多执行一次。当函数第一次被触发时，它会立即执行，但随后的触发都会被忽略，直到指定的时间间隔过去后才会再次执行。

实现原理

节流函数内部通常也使用计时器来实现函数执行频率的限制。当函数第一次被触发时，会启动一个计时器，如果在计时器到期之前函数再次被触发，则忽略这次触发，直到计时器到期后才会再次执行函数。

代码示例

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

在这个例子中，我们使用Date.now()函数来获取当前时间戳。当函数第一次被调用时，lastCall变量被设置为当前时间戳。如果在指定的时间间隔内函数再次被调用，则比较当前时间戳与lastCall变量的值，如果时间差大于指定的时间间隔，则执行函数并更新lastCall变量的值。否则，忽略这次触发。