轻轻松松搞懂JS防抖和节流，前端开发不再有难题！

2023-02-13 19:46:46

前言

在前端开发的广阔天地中，性能优化永远是至关重要的使命。其中，防抖和节流脱颖而出，成为两大不可或缺的优化利器。它们凭借着控制事件触发频率、提升用户体验和减轻系统负担的独门绝技，深受开发者青睐。那么，究竟何为防抖和节流？它们各自有哪些奥秘？何时又该巧妙地运用它们呢？

防抖与节流的奥义

防抖，顾名思义，就是要让函数的执行“消停”片刻，避免在短时间内频繁触发。它的秘诀在于：如果函数在规定的时间间隔内再次被召唤，那么它会果断取消此前未执行的调用，转身投入到最新一次函数调用的怀抱中。这样一来，只有当事件触发在一定时间后偃旗息鼓，函数才会真正粉墨登场。

节流，则是一种更严格的控制手段。它要求函数在指定的休眠期内只能执行一次。当事件触发蜂拥而至时，只有最先露面的那个幸运儿能够唤醒函数，而其余的事件都只能含恨退场，在休眠期结束前无缘与函数亲密接触。

何时施展防抖与节流？

理解了防抖和节流的真谛，我们不禁会发问：它们究竟在哪些场景中大显身手呢？让我们逐一揭秘：

防抖的适用场合：

输入框的实时搜索功能：在用户飞快地输入搜索词时，防抖可以避免函数在每个击键时都兴风作浪，从而减轻服务器的压力，让用户体验如丝般顺滑。
窗口大小改变事件处理：当窗口大小变化不定时，防抖可以阻止事件处理函数大动干戈，避免页面布局乱成一团麻。

节流的适用场合：

页面滚动事件处理：当页面上下翻飞时，节流可以限制滚动事件触发的频率，避免页面内容出现令人眼花缭乱的跳动或卡顿。
鼠标移动事件处理：在鼠标指针欢快地游走时，节流可以有效阻止函数在每一次移动中都争先恐后，从而降低CPU的占用率，提升网页的流畅度。

实战演练：代码示例

理论固然重要，但实践才是硬道理。为了进一步加深对防抖和节流的理解，让我们亲自操刀，用代码实现它们的奥妙：

防抖函数：

function debounce(fn, delay) {
  let timerId;
  return (...args) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

节流函数：

function throttle(fn, delay) {
  let flag = true;
  return (...args) => {
    if (!flag) {
      return;
    }
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
}