js的节流和防抖

在JavaScript中，节流（Throttling）和防抖（Debouncing）是两种常用的优化高频率触发的事件或函数调用的技术。

1. 防抖（Debouncing）：

防抖的基本思想是：一定时间内，如果事件持续触发，那么只执行最后一次，忽略中间的触发。常用于输入搜索、窗口调整大小等场景。

例如，下面的函数是一个简单的防抖实现：

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

使用方法：

const myEfficientFn = debounce(function() {  
  // 实际的函数逻辑  
}, 250);

1. 节流（Throttling）：

节流的基本思想是：在一定时间内，事件最多只触发一次。常用于滚动、resize等场景。

例如，下面的函数是一个简单的节流实现：

function throttle(func, limit) {  
  let inThrottle;  
  return function() {  
    const context = this;  
    const args = arguments;  
    if (!inThrottle) {  
      func.apply(context, args);  
      inThrottle = true;  
      setTimeout(() => inThrottle = false, limit);  
    }  
  };  
}

使用方法：

const myEfficientFn = throttle(function() {  
  // 实际的函数逻辑  
}, 250);

总结：防抖和节流都可以用于限制高频率的事件处理，但它们的行为略有不同。防抖更适用于“减少执行次数”的场景，而节流更适用于“限制执行频率”的场景。