节流与防抖的最佳使用场景和区别，助力程序员提升工作效率

前端

2023-09-17 22:56:51

节流和防抖

在前端开发中，节流和防抖是两种常用的 JavaScript 技术，用于优化事件处理。这些技术可以防止事件在短时间内被多次触发，从而提高程序的性能和响应速度。

节流（Throttle）

节流的意思是，在规定时间内，只触发一次。比如，我们设定 500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。

最佳使用场景：

避免在快速点击时触发多次事件。例如，防止用户在短时间内连续提交表单，防止用户在短时间内连续发送 AJAX 请求，防止用户在短时间内连续点击按钮等。
限制事件的触发频率。例如，限制滚动事件的触发频率，防止用户在快速滚动页面时触发多次事件。
平滑动画效果。例如，限制动画帧的触发频率，防止动画效果过于卡顿。

防抖（Debounce）

防抖的意思是，在规定的时间内，只触发最后一次。比如，我们设定 500ms，在这个时间内，无论点击按钮多少次，它都只会触发最后一次点击。

最佳使用场景：

避免在用户输入时触发多次事件。例如，防止用户在输入搜索框时触发多次搜索请求，防止用户在输入表单时触发多次验证请求，防止用户在输入评论时触发多次提交请求等。
延迟执行任务。例如，延迟执行图像加载，延迟执行函数调用，延迟执行页面渲染等。
优化事件处理。例如，优化滚动事件的处理，优化窗口大小改变事件的处理，优化键盘事件的处理等。

区别

节流和防抖虽然都是用于优化事件处理，但它们的区别在于：

节流规定时间内只触发一次，而防抖规定时间内只触发最后一次。
节流适用于快速点击时避免触发多次事件，而防抖适用于用户输入时避免触发多次事件。
节流可以用于平滑动画效果，而防抖可以用于延迟执行任务。

代码示例

// 节流函数
function throttle(func, wait) {
  let timer = null;
  return function() {
    if (timer) return;
    timer = setTimeout(() => {
      func.apply(this, arguments);
      timer = null;
    }, wait);
  }
}

// 防抖函数
function debounce(func, wait) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  }
}