浅析函数防抖节流

防抖和节流都是前端开发中常用的优化性能的技术。

一、定义

防抖：

防抖指的是在事件触发后，在规定的时间内若再次触发，则重新计时，直到规定时间内没有再次触发事件，才执行事件处理。这样可以避免在短时间内频繁地触发事件而导致页面卡顿或者出现错误。

节流：

节流指的是在规定的时间内只执行一次事件处理。在事件被触发后，首先会执行一次事件处理，然后在规定时间内，无论事件被触发多少次，都不会再次执行事件处理，直到规定时间过去后才会执行下一次事件处理。这样可以有效节约资源，提高页面的性能。

两者的区别在于防抖是在最后一次事件触发之后再进行事件处理，而节流则是在规定时间内只执行一次事件处理。

简单理解为

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

二、示例

防抖

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

// 使用防抖函数处理事件
const handleSearch = debounce(function() {
  // 在这里执行搜索操作
}, 300);

// 监听输入框的输入事件，并在防抖函数中处理
input.addEventListener('input', handleSearch);

防抖函数使用了闭包和定时器来实现。当事件触发时，清除之前设置的定时器，然后重新设置一个新的计时器，在规定时间内若再次触发该事件，则重新计时，直到规定时间内没有再次触发事件，才会执行事件处理。这样可以避免在短时间内频繁地触发事件而导致页面卡顿或者出现错误。

具体实现中，首先定义了一个timer变量来保存定时器。然后返回一个匿名函数，当该匿名函数被调用时，会先清除之前设置的定时器，然后重新设置一个新的计时器，等待一段时间后执行目标函数。

节流

function throttle(func, delay) {
  let timer;
  let lastTime = 0;
  
  return function() {
    const currentTime = Date.now();
    
    if (currentTime - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = currentTime;
    }
  };
}

// 使用节流函数处理事件
const handleScroll = throttle(function() {
  // 在这里执行滚动操作
}, 200);

// 监听滚动事件，并在节流函数中处理
window.addEventListener('scroll', handleScroll);

节流函数也使用了闭包和定时器来实现。每次事件触发时，判断当前时间和上一次执行事件处理的时间差，只有当时间差超过规定时间间隔时才执行事件处理操作。这样可以有效节约资源，提高页面的性能。

具体实现中，首先定义了一个timer变量来保存定时器，以及一个lastTime变量来保存上一次执行事件处理的时间。然后返回一个匿名函数，当该匿名函数被调用时，会获取当前时间，计算当前时间和上一次执行事件处理的时间差，只有当时间差超过规定时间间隔时才执行事件处理操作，并更新lastTime变量的值。

三、使用场景

1. 防抖（Debounce）：

• 在用户输入搜索关键字时，可以使用防抖来减少频繁的搜索请求。只有在用户停止输入一段时间后才进行实际的搜索操作。
• 在窗口大小调整、滚动事件等情况下，可以使用防抖来避免过多的计算和重绘操作。

2. 节流（Throttle）：

• 在滚动事件处理中，可以使用节流来限制事件处理的频率，减少滚动时的计算量，提高页面性能。
• 在按钮点击事件或提交表单等情况下，可以使用节流来防止用户重复操作，限制事件的触发频率。

防抖和节流的主要目的是优化性能和提升用户体验，避免不必要的网络请求或频繁的计算和渲染操作。根据具体的业务需求和交互场景，可以选择适合的方式来应用防抖和节流，以达到更好的效果。

四、二者区别

相同点：

• 目的：防抖和节流都是为了控制事件触发的频率或次数，从而提升性能和用户体验。
• 实现方式：防抖和节流都可以通过设置定时器来延迟执行或限制执行次数。

不同点：

1. 触发时机：

• 防抖（Debounce）：事件触发后会等待一定的时间间隔（延迟期），只有在延迟期结束后没有再次触发事件时，才会执行事件处理。
• 节流（Throttle）：事件触发后会在固定的时间间隔内执行一次事件处理，无论在这段时间内触发了多少次事件，都只执行一次处理。

2. 执行次数：

• 防抖：在延迟期内，如果事件触发多次，只会执行一次事件处理，即只执行最后一次触发事件的处理。
• 节流：在固定的时间间隔内，无论事件触发多少次，都会执行一次事件处理。

3. 应用场景：

• 防抖 适用于需要等待用户停止操作后再执行的情况，如搜索框输入、窗口调整等场景。
• 节流 适用于需要限制触发频率的情况，如滚动事件、按钮点击等场景。

就例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次

综上所述，防抖和节流的主要区别在于触发时机和执行次数。防抖用于等待一定时间后执行最后一次操作，节流用于限制在一定时间间隔内执行一次操作。根据具体需求选择适合的方式，可以优化性能和用户体验。

五、优点与存在的不足

防抖的好处：

1. 减少处理次数：对于频繁触发的事件，使用防抖可以大大减少事件处理的次数，避免过多的计算和渲染，提升性能。
2. 提升用户体验：防抖可以让用户在停止操作后再执行事件处理，避免了短时间内多次执行处理带来的不必要交互和视觉干扰。
3. 代码简洁：使用防抖可以通过封装一个函数或组件来统一处理事件，减少重复代码，提高开发效率。

防抖的不足：

• 延迟期设置不当可能导致误操作：如果将延迟期设置得太长，可能会造成用户的不满或误操作；而设置得太短，则可能会导致事件处理无法完成。
• 对实时性要求较高的场景不适用：防抖需要等待一段时间才能执行事件处理，因此对于实时性要求较高的场景，如视频播放进度条拖动，防抖并不是最佳选择。

节流的好处：

1. 控制执行次数：节流可以限制在一定时间间隔内执行事件处理的次数，避免了频繁触发事件带来的性能消耗。
2. 平滑交互体验：节流可以让事件处理在固定时间间隔内均匀执行，提供更平滑的交互体验，尤其适用于滚动、拖拽等连续触发的场景。
3. 保留最新状态：由于节流会在固定时间间隔内执行事件处理，可以保留最新的状态或数据，确保处理的准确性和一致性。
4. 适用于实时性要求不高的场景：相比于防抖，节流可以更加灵活地控制执行次数，适用于实时性要求不高的场景，如页面滚动、搜索建议等。

节流的不足：

• 延迟响应：由于节流会在固定时间间隔内执行事件处理，可能会造成响应的延迟，特别是在较长的时间间隔设置下。
• 频率过低可能影响用户体验：如果时间间隔设置得太长，可能会导致事件的实时性不足，影响用户的操作体验。
• 实现复杂度较高：相比于防抖，实现节流的逻辑相对复杂一些，需要考虑计时器、时间间隔控制等因素，增加了开发的复杂度。

综上所述，防抖和节流都有自己的优点和限制。选择使用哪种方式取决于具体的业务需求、事件类型以及性能和用户体验的权衡。