防抖和节流简介

crary,记忆

已于 2024-11-15 11:30:01 修改

阅读量573

点赞数 13

CC 4.0 BY-SA版权

分类专栏：前端知识总结文章标签： javascript 开发语言前端学习

于 2024-02-18 19:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44327851/article/details/136149959

47 篇文章

订阅专栏

本文介绍了防抖和节流两种常用的技术，用于控制函数执行频率，以优化搜索框搜索、滚动加载等场景的性能，减少频繁操作，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖和节流都是用来控制函数执行频率的技术，可以用来提高性能和优化用户体验。

简介：

防抖（Debounce）：防抖是指在一段时间内多次触发同一个函数时，只执行最后一次触发的函数。应用场景包括输入框搜索、滚动加载等需要控制频率的操作。在实现上，可以通过setTimeout和clearTimeout来实现防抖。
```
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}
```
节流（Throttle）：节流是指在一段时间内多次触发同一个函数时，按照一定的频率执行函数。应用场景包括滚动事件、resize事件等需要控制执行频率的操作。在实现上，可以通过设置一个定时器来控制函数的执行频率。
```
function throttle(func, delay) {
  let timer;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}
```

应用场景：

区别:

注意点：

防抖（Debouncing）

防抖触发条件：只有事件停止一段时间后才会执行一次函数。如果事件频繁触发，延迟时间会一直重置，直到最后一次触发停止一段时间后才执行。
初次触发的问题：防抖函数通常会等到事件停止才执行，因此在事件首次触发时，不会立即响应。如果需要首次触发时就立刻响应，可以采用一些变体方案（例如：立即执行一次，之后防抖）。
延迟执行时间的选择：合理选择延迟时间非常重要。如果时间设置过短，可能会没有达到防抖的效果；设置过长，则可能导致响应延迟，不符合用户的需求。
实际应用中的精确控制：在实际使用中，需要确保防抖的延迟时间合适，避免不必要的延迟，尤其是用户体验上有较高要求的场景。

节流（Throttling）

执行频率控制：节流确保每隔固定的时间间隔只执行一次函数。例如，设置每200毫秒执行一次函数，无论事件触发多少次。
初次触发与延迟：节流通常在事件第一次触发时就会立即执行，并且随后按照指定的间隔执行。不同于防抖，节流不会延迟直到事件停止，而是控制执行频率。
时间间隔的选择：选择合适的时间间隔非常关键。如果间隔太短，可能无法有效减少事件触发的频率，反而增加性能负担；间隔过长，可能会导致应用对用户操作的响应不及时。
结合使用：在一些场景中，防抖和节流可以结合使用。例如，滚动时可以使用节流减少函数的执行频率，而在输入框中使用防抖来减少请求次数。

防抖和节流 简介