防抖和节流：深入剖析前端世界的双生守护者

前端

2024-01-12 07:08:56

函数防抖和节流：前端世界的双生守护者

在快速发展的互联网时代，前端开发人员肩负着至关重要的使命，他们需要打造出响应迅速、交互流畅的Web应用程序。而防抖和节流技术正是实现这一目标的关键所在。

一、防抖：沉着冷静的执行者

防抖，顾名思义，就是在一段时间内多次触发一个函数，但只执行最后一次触发后的操作。其原理是利用定时器，在每次触发函数时重置定时器，只有在定时器过期（指定时间段已过）后才执行函数。

二、节流：稳健有力的限制者

节流则恰恰相反，它会在指定时间段内只执行函数一次。其原理是利用节流阀，在指定时间段内，只有首次触发函数会执行，后续触发将被忽略。

三、防抖与节流的区别

虽然防抖和节流都涉及时间控制，但其本质区别在于：

执行时机： 防抖只执行最后一次触发后的操作，而节流在触发后立即执行，并在指定时间段内忽略后续触发。
适用场景： 防抖适用于用户频繁触发且希望在操作完成后才执行的场景，如搜索框输入、滚动事件；而节流适用于用户连续触发且需要在指定时间间隔内限制执行次数的场景，如窗口大小变化、节流阀。

四、代码示例

防抖：

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

节流：

function throttle(func, wait) {
  let isRunning = false;
  return function() {
    const args = arguments;
    if (!isRunning) {
      func.apply(this, args);
      isRunning = true;
      setTimeout(() => {
        isRunning = false;
      }, wait);
    }
  };
}