防抖和节流

防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，主要用于控制函数执行的频率，尤其是在处理高频事件时（如滚动、输入等）。

防抖（Debounce）

定义：
防抖是一种确保某个函数在一定时间内只被执行一次的策略。它通常用于处理用户输入事件，避免在输入过程中频繁触发函数。

实现原理：

• 当事件被触发时，设置一个定时器。
• 如果在定时器到期前再次触发事件，则清除之前的定时器，并重新设置一个新的定时器。
• 只有在事件不再被触发一段时间后，函数才会执行。

应用场景：

1. 输入框搜索：在用户输入时，防止每次输入都发起请求，可以在用户停止输入一段时间后再发送请求。
2. 窗口调整：在调整浏览器窗口大小时，避免频繁计算布局或样式。
3. 表单验证：在用户停止输入后进行表单验证。

示例代码：

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

// 使用示例
const handleInput = debounce(() => {
  console.log('输入完成，执行请求');
}, 300);

节流（Throttle）

定义：
节流是一种控制函数在一定时间内只能执行一次的策略。它通常用于限制函数的执行频率。

实现原理：

• 设置一个标记来跟踪函数是否正在执行。
• 当事件被触发时，如果标记为 false，允许执行函数，并将标记设为 true。
• 在函数执行完成后，定时器会在指定的时间后将标记重置为 false，允许下一次执行。

应用场景：

1. 滚动监听：在页面滚动时，限制计算或加载操作的频率，比如无限滚动。
2. 窗口调整：在窗口大小变化时，每隔一段时间计算布局，而不是每次都计算。
3. 按钮点击：防止用户快速多次点击按钮。

示例代码：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例
const handleScroll = throttle(() => {
  console.log('滚动中，执行操作');
}, 1000);

小结

• 防抖：用于延迟执行，常用于处理快速触发的事件（如输入），只在事件停止后执行一次。
• 节流：用于限制频繁执行，常用于需要定期执行的事件（如滚动、窗口调整），确保函数在一定时间内最多执行一次。

选择适当的策略可以有效提升性能和用户体验。

小tips一般开发中
防抖用于button点击，窗口调整
节流用于滚动下拉，下拉框联想