前端防抖节流优化详解，搞懂这两种技术，让你的代码更流畅

2023-11-01 18:57:14

防抖和节流：优化前端事件处理的利器

在前端开发中，我们经常遇到需要处理频繁触发事件的情况，例如输入框中的输入、页面的滚动或按钮的点击。如果不加以优化，这些事件可能会对性能造成严重影响，导致页面卡顿或服务器压力过大。防抖和节流技术应运而生，它们是用来优化事件处理的利器，可以显著提高代码的性能和响应速度。

防抖：防止抖动

防抖，顾名思义，就是防止抖动。它只会在事件触发后，经过一段时间才会执行回调函数。这类似于一个门闩，当事件频繁触发时，门闩会不断重置，从而防止真正的执行发生。

节流：限制频率

节流，顾名思义，就是限制频率。它会在事件触发时立即执行回调函数，然后在一段时间内忽略后续的事件触发。这就好比一个水龙头，当水流过快时，水龙头会自动调节流量，防止水流泛滥。

防抖和节流的区别

防抖和节流虽然都是优化事件处理的技术，但它们之间存在着一些细微的区别：

触发时机： 防抖只会在事件触发后，经过一段时间才会执行回调函数。而节流会在事件触发时立即执行回调函数，然后在一段时间内忽略后续的事件触发。
触发频率： 防抖只会在事件触发后，执行一次回调函数。而节流会在事件触发时立即执行一次回调函数，然后在一段时间内忽略后续的事件触发。
使用场景： 防抖通常用于处理用户输入的事件，比如在输入框中输入内容时，防止用户快速输入时产生的重复验证请求。而节流通常用于处理滚动、缩放等连续触发的事件，比如在滚动页面时，限制加载内容的频率，从而防止页面卡顿。

代码示例

为了更好地理解防抖和节流，我们来看一些代码示例：

防抖函数：

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

节流函数：

const throttle = (func, delay) => {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime < delay) {
      return;
    }
    lastTime = now;
    func(...args);
  };
};