javascript 防抖与节流

---

1、基础概念

JavaScript中的防抖（debounce）和节流（throttle）是用于控制函数执行频率的方法技术。
防抖：当一个事件连续触发时，防抖技术将只执行最后一次触发事件的函数调用。换句话说，只有在停止触发事件一段时间后，才会执行函数。(即：n秒后再执行该事件，若在n秒内被重复触发，则重新计时)
防抖使用的场景： - 搜索框输入联想：用户在输入时，如果一直输入，会频繁触发搜索请求，使用防抖可以减少请求的次数，只在用户停止输入后才发送请求。 - 页面滚动加载更多：当用户滚动页面时，会频繁触发加载更多数据的函数，使用防抖可以减少请求的次数，只在用户停止滚动后才发送请求等。
代码示例：

function debounce(func, wait) {  
  let timeout;  
  return function() {  
    const context = this;  
    const args = arguments;  
    clearTimeout(timeout);  
    timeout = setTimeout(function() {  
      func.apply(context, args);  
    }, wait);  
  };  
}
const input = document.querySelector('input');  
input.addEventListener('input', debounce(function() {  
  console.log('Input value:', input.value);  
}, 200));

节流：当一个事件连续触发时，节流技术会限制函数的执行频率。换句话说，函数在一段时间内只会执行一次。（即：n秒内只运行一次，若在n秒内重复触发，只有一次生效）
节流使用的场景： - 页面滚动事件：当用户滚动页面时，会触发滚动事件，如果不使用节流技术，可能会导致页面卡顿。使用节流可以限制滚动事件的触发频率，减少卡顿现象。
代码示例：

function throttle(func, limit) {  
  let inThrottle;  
  return function() {  
    const context = this;  
    const args = arguments;  
    if (!inThrottle) {  
      func.apply(context, args);  
      inThrottle = true;  
      setTimeout(function() {  
        inThrottle = false;  
      }, limit);  
    }  
  };  
}
const input = document.querySelector('input');  
input.addEventListener('input', throttle(function() {  
  console.log('Input value:', input.value);  
}, 200));

防抖、节流，都可以通过传递一个延迟时间参数来控制函数的执行频率。在实际应用中，根据具体需求选择使用防抖还是节流技术。

2、区别

触发时刻：
防抖：只有在事件停止触发一段时间后，才会执行函数。
节流：在一段时间内只会执行一次函数。
执行次数：
防抖：只会执行最后一次触发事件的函数调用。
节流：在一段时间内只会执行一次函数调用。
实现方式：
防抖：在事件触发后设置一个定时器，在定时器延迟时间内没有再次触发事件，则执行函数。
节流：在事件触发时设置一个定时器，在定时器延迟时间内触发事件则不执行函数。只有当定时器执行完毕后，才能再次触发执行函数。
使用场景：

防抖：适用于连续事件触发的情况，如搜索框输入、滚动加载更多等。
节流：适用于高频率事件触发的情况，如页面滚动、鼠标移动等。
根据具体的需求，选择使用防抖或节流技术可以有效地控制函数的执行频率，提升用户体验和性能。
3、优缺点
JavaScript的防抖和节流都是优化高频率触发的事件或函数调用的技术，但它们的使用场景和优缺点略有不同。

防抖的优点：
减少不必要的操作：防抖能够确保在连续触发事件时，只执行最后一次操作，避免了频繁执行操作带来的性能浪费。
优化用户体验：在一些需要用户等待的操作中，防抖可以避免频繁触发操作导致的界面卡顿，提高用户体验。
防抖的缺点：
可能会错过一些操作：如果事件触发频率过高，防抖可能会忽略掉一些操作，导致一些必要的操作没有执行。
不适合所有场景：防抖只适合在连续触发事件时使用，对于一些非连续触发的事件，使用防抖可能并不合适。
节流的优点：
控制操作频率：节流能够确保在一定时间内只执行一次操作，避免了频繁执行操作带来的性能浪费。
适合各种场景：节流适用于各种场景，无论是连续触发的事件还是非连续触发的事件，都可以使用节流来优化性能。
节流的缺点：
可能会漏掉一些操作：如果事件的触发频率非常高，节流可能会导致一些必要的操作被忽略掉。
需要合理设置时间间隔：节流的时间间隔需要根据实际情况进行调整，如果时间间隔设置过长，可能会导致性能问题；如果时间间隔设置过短，则可能会导致频繁触发事件时无法及时处理。

置顶博客：spring 不一样的整合fastjson 点点赞，点点关注
感谢观看，希望对您有帮助~