防抖和节流的区别和应用场景

James man

于 2024-09-14 09:13:19 发布

阅读量923

点赞数 11

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_56076428/article/details/142247194

版权

防抖（Debounce）和节流（Throttle）是两种常见的性能优化技术，它们的主要作用是控制高频触发的事件执行次数，以减少不必要的函数调用。它们的区别如下：

1. 防抖（Debounce）

概念：防抖的原理是，事件触发后，只有在规定的时间内没有再次触发，处理函数才会执行。如果在规定时间内事件再次触发，则重新计时。防抖可以有效避免频繁触发事件时，执行过多无用的操作。

应用场景：

用户输入搜索框时：当用户停止输入一段时间后再发起搜索请求，防止每个输入都触发搜索操作。
浏览器窗口大小调整：用户停止调整浏览器窗口大小后再执行调整后的操作，防止窗口每次变化都触发大量重绘。

示例：

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

2. 节流（Throttle）

概念：节流的原理是，保证一个函数在一定时间内只执行一次，即使在这段时间内事件被频繁触发。节流可以限制函数的执行频率，适合那些需要定期执行的操作。

应用场景：

滚动事件：当用户滚动页面时，每隔一段时间触发一次回调，防止滚动时每次触发滚动事件都导致大量计算。
按钮点击事件：防止按钮被用户频繁点击，导致多次触发事件。

示例：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

总结区别：

特性	防抖（Debounce）	节流（Throttle）
触发频率	事件停止触发后才会执行一次	一定时间内只会执行一次
适用场景	适用于避免频繁触发的操作，如输入框搜索	适用于控制频繁触发的操作，如页面滚动
执行时机	事件停止触发后的指定时间	每隔一段时间执行一次
侧重点	减少触发次数，防止重复调用	控制触发频率，定期调用

适合使用防抖的场景

防抖的关键点是避免函数的频繁调用，只有在事件停止触发之后的一段时间内没有新的触发，才会执行函数。因此，防抖适用于只在事件结束时处理逻辑的情况。

典型场景：

搜索框输入：
当用户输入时，不希望每个字符变化都触发搜索请求，而是等用户停止输入后再发送搜索请求。这样可以减少不必要的网络请求。
窗口调整（resize）事件：
浏览器窗口调整大小时，不希望在用户调整过程中频繁触发页面重绘操作，而是希望用户停止调整一段时间后再执行页面重新布局。
表单验证：
在用户输入表单时，不希望每次输入都触发验证操作，而是在用户停止输入后进行一次验证。
自动保存：
在用户编辑文本时，等用户停止输入一定时间后再触发自动保存功能，而不是每次输入都保存一次。

总结：防抖适用于需要等待操作结束后再触发事件的场景。

适合使用节流的场景

节流的关键点在于控制函数的调用频率，即在一定时间内只允许执行一次。节流适用于持续高频触发，但你希望能够限制频率的场景。

典型场景：

页面滚动事件：
滚动事件频繁触发，通常每次滚动都会触发大量计算（如懒加载、无限滚动等）。使用节流可以控制滚动事件的触发频率，比如每隔200ms响应一次滚动操作，而不是每次滚动都触发。
按钮点击事件：
防止用户短时间内多次点击同一个按钮，导致事件处理函数被频繁触发（例如用户快速点击“提交”按钮），使用节流可以限制按钮在短时间内只能响应一次。
鼠标移动事件：
在拖拽、缩放等操作中，鼠标移动事件非常频繁，如果每次都进行 DOM 操作或重绘，会影响性能。节流可以确保每隔一段时间响应一次鼠标移动操作。
高频动画事件：
对于那些需要频繁更新页面状态的事件，比如游戏中的动画、视频进度条的更新，节流可以让这些更新操作以一定频率触发，而不是每一帧都进行。