在JavaScript中,节流(Throttling)和防抖(Debouncing)是两种常用的优化高频率触发的事件或函数调用的技术。
- 防抖(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);- 节流(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);总结:防抖和节流都可以用于限制高频率的事件处理,但它们的行为略有不同。防抖更适用于“减少执行次数”的场景,而节流更适用于“限制执行频率”的场景。