闭包节流和防抖

闭包节流和防抖是 JavaScript 中常用的两种优化函数执行的技术，主要用于控制函数的执行频率。下面分别解释它们的概念和用途：

闭包节流（Throttling）

闭包节流是限制函数在一定时间内只能执行一次的技巧。这通常用于处理频繁触发的事件，比如滚动、鼠标移动等。节流函数可以确保在指定的时间间隔内，函数只被调用一次。

用途：

• 减少函数调用频率，避免过度执行。
• 常用于处理滚动事件、鼠标移动事件等。

实现示例：

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);
    }
  };
}

防抖（Debouncing）

防抖是确保函数在事件被触发多次后，只在最后一次事件触发后延迟执行的技巧。这通常用于输入框的搜索建议、窗口调整等场景，可以避免在事件频繁触发时多次执行函数。

用途：

• 延迟执行函数，直到事件不再触发。
• 常用于处理输入框的实时搜索、窗口调整等。

实现示例：

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

区别

• 节流：无论事件触发的频率如何，函数都会在指定的时间间隔内被调用一次。
• 防抖：函数只在最后一次事件触发后延迟执行，如果事件在延迟时间内再次触发，则重新计算延迟时间。

使用场景

• 节流：适用于需要均匀处理事件的场景，比如滚动事件。
• 防抖：适用于需要在事件停止触发后才执行函数的场景，比如输入框的搜索建议。

通过这些技术，可以有效地优化 JavaScript 应用的性能和用户体验。