一篇文章带你彻底认识「防抖和节流」防抖和节流是什么

防抖和节流是编程中常用的两种技术，用于控制函数执行的频率，防抖（Debounce）是指在一个事件触发后，规定一个时间间隔，如果在这个间隔内事件再次被触发，则重新计算时间间隔，直到最后一次事件触发后，才执行函数，而节流（Throttle）则是指限制一个函数在一定时间内只能执行一次，两者都可以有效防止函数频繁执行导致的性能问题，在实际应用中，防抖常用于搜索框、按钮点击等场景，而节流则常用于滚动加载、窗口调整大小等场景，通过合理使用防抖和节流，可以显著提升程序的性能和用户体验。

一篇文章带你彻底认识「防抖和节流」

在现代前端开发中，性能优化是一个永恒的话题，为了提高页面响应速度、减少资源浪费，开发者们常常需要采取各种技术手段来优化代码。“防抖”（Debounce）和“节流”（Throttle）是两种非常实用的技术，它们可以帮助我们有效地控制函数的执行频率，从而优化性能，本文将带大家彻底认识这两种技术，理解它们的原理、应用场景以及实现方式。

防抖（Debounce）

1 什么是防抖？

防抖是一种编程技术，主要用于限制函数的执行频率，如果一个函数被频繁触发，防抖技术会规定一个时间间隔，只有在最后一次触发后的这个时间间隔内没有其他触发时，函数才会真正执行，这样可以有效防止函数被频繁调用，从而节省资源、提高性能。

2 防抖的应用场景

防抖技术广泛应用于各种需要防止频繁操作的场景，

• 搜索框输入：用户在搜索框中输入内容时，如果每次输入都触发一次搜索请求，将会非常消耗资源，使用防抖技术，只有在用户停止输入一段时间后才进行搜索请求,可以显著提高效率。
• 窗口大小调整：当窗口大小发生变化时，如果每次调整都重新计算布局或重新请求资源，将会非常消耗资源，使用防抖技术,只有在窗口大小稳定一段时间后才执行相关操作。
• 滚动加载：在网页滚动时，如果每次滚动都加载新的内容，将会导致页面卡顿，使用防抖技术,只有在用户停止滚动一段时间后才加载新内容。

3 防抖的实现方式

防抖的实现方式有多种,下面是一个基于JavaScript的简易实现：

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

在这个实现中，debounce函数接受两个参数：func是要防抖的函数，wait是时间间隔（以毫秒为单位），通过setTimeout和clearTimeout的组合，我们可以实现只有在最后一次调用后的时间间隔内没有其他调用时,才执行目标函数。

节流（Throttle）

1 什么是节流？

与防抖不同，节流是一种控制函数在一定时间内只能执行一次的编程技术，也就是说，无论函数被触发多少次，在指定的时间间隔内，它都只会执行一次，节流常用于控制那些不需要频繁触发的操作，比如鼠标移动、窗口滚动等。

2 节流的应用场景

节流技术同样适用于各种需要限制操作频率的场景，

• 鼠标移动：当鼠标移动时，如果每次移动都重新计算位置或执行其他操作，将会非常消耗资源，使用节流技术,只有在鼠标停止移动一段时间后才执行相关操作。
• 窗口滚动：与防抖类似，窗口滚动时如果每次滚动都加载新内容或重新计算布局，将会导致性能问题，使用节流技术,可以限制滚动事件的触发频率。
• 动画效果：在动画效果中，如果每次帧都重新计算或重新渲染，将会导致性能问题，使用节流技术,可以限制动画的更新频率。

3 节流的实现方式

节流的实现方式与防抖类似，但逻辑上有所不同,下面是一个基于JavaScript的简易实现：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    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));
    }
  };
}

在这个实现中，throttle函数接受两个参数：func是要节流的函数，limit是时间间隔（以毫秒为单位），通过setTimeout和clearTimeout的组合,我们可以实现目标函数在指定的时间间隔内只执行一次。

防抖与节流的对比与选择

1 对比

• 触发条件不同：防抖是在指定时间内没有新的触发时才执行函数；而节流是在指定时间内只执行一次函数。
• 应用场景不同：防抖更适合于需要防止用户频繁操作的场景；而节流更适合于需要限制操作频率的场景，输入框的搜索请求更适合用防抖；而鼠标移动事件更适合用节流。
• 实现方式不同：虽然防抖和节流都使用了定时器来控制函数的执行频率，但它们的实现逻辑有所不同，防抖通过清除定时器来实现；而节流通过延迟执行来实现，这使得它们在某些情况下表现出不同的行为特性，在连续快速触发的情况下，防抖可能会延迟执行最后一次触发；而节流则可能会跳过某些触发事件，因此在实际应用中需要根据具体需求选择合适的实现方式，同时需要注意的是在实际开发中还需要考虑一些边界情况如首次触发时间等可能需要对上述代码进行微调以满足具体需求，但总体来说上述代码已经能够很好地展示防抖和节流的原理及实现方法了,通过本文的介绍相信大家对这两种技术有了更深入的了解并能够在实践中灵活运用它们来优化前端性能了！