掌握JS编码核心武器：防抖和节流的艺术**

前端

2023-10-10 20:25:06

在现代Web开发中，JavaScript已成为不可或缺的一部分，而为了让前端应用流畅、响应迅速，优化代码性能至关重要。其中，防抖和节流是两项常用的技术，它们能够有效降低回调函数的执行频率，从而节省计算资源并提升应用性能。

一、概念如何理解？

1. 防抖

防抖的本质是在一定时间内，只执行一次回调函数。当事件连续触发时，它会抑制函数的重复调用，直到这段时间结束。防抖函数非常适合处理用户输入事件，如文本框输入、鼠标移动等。

2. 节流

节流与防抖类似，但它会在指定的时间间隔内，只执行一次回调函数。无论事件触发多少次，节流函数都会确保在每个时间间隔内只执行一次回调。节流函数常用于处理滚动事件、窗口大小改变事件等。

3. 相同点

防抖和节流的目的都是为了降低回调函数的执行频率，从而节省计算资源，提高应用性能。

4. 不同点

防抖函数在一段时间内只执行一次回调函数，而节流函数会在指定的时间间隔内只执行一次回调函数。防抖函数更适合处理用户输入事件，而节流函数更适合处理滚动事件、窗口大小改变事件等。

二、应用场景

1. 防抖

文本框输入：防止用户在快速输入时触发多次回调，导致不必要的计算。
鼠标移动：防止鼠标快速移动时触发多次回调，导致不必要的渲染。
滚动事件：防止滚动条快速滚动时触发多次回调，导致不必要的计算。

2. 节流

窗口大小改变事件：防止窗口大小快速改变时触发多次回调，导致不必要的渲染。
滚动事件：防止滚动条快速滚动时触发多次回调，导致不必要的计算。

三、实现方法

1. 防抖

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

2. 节流

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime < delay) {
      return;
    }
    lastTime = now;
    fn.apply(this, args);
  };
}