【JavaScript-面】关于防抖与节流

防抖例题：力扣2627

前端开发中，防抖（Debouncing）和节流（Throttling）是两种常用的优化技术，用于限制函数在短时间内被频繁调用，以提高页面性能，尤其是在处理高频事件如窗口调整（resize）、滚动（scroll）、键盘事件（keyup）等时非常有用。

防抖（Debouncing）

防抖技术确保函数在特定的时间内不再被调用后，才执行一次。常见的场景是用户在输入框中输入文字时，不是每输入一个字符就执行一次处理函数，而是当用户停止输入一段时间后才执行，这样可以减少不必要的计算和请求。
工作原理：

• 当事件触发时，并不立即执行目标函数，而是延迟一段时间执行。
• 如果在这个延迟时间内事件再次被触发，则重新计时。
  应用场景：
• 输入框连续输入文字时的校验。
• 按钮连续点击防止多次提交。

节流（Throttling）

节流技术则是确保函数以固定的频率被调用。与防抖不同，节流不管事件触发有多频繁，都会按照设定的时间间隔执行函数。
工作原理：

• 当事件触发时，会执行目标函数。
• 在目标函数执行后的一段时间内，如果事件再次被触发，则不会执行目标函数。
  应用场景：
• 窗口调整（resize）时避免过多的计算。
• 滚动（scroll）事件的处理。

代码示例

以下是一个简单的防抖和节流的JavaScript实现示例：

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}
// 节流函数
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

通过防抖和节流技术，可以有效减少不必要的资源消耗，提升用户体验和前端性能。