什么是防抖和节流？有什么区别? 如何实现？

防抖（Debounce）和节流（Throttle）是两种常用的技术手段，主要用于控制某个函数在一定时间内触发的次数，以减少触发频率，提高性能并避免资源浪费。

防抖（Debounce）的工作原理是，当事件持续触发时，只有在事件停止触发n秒后，才会执行事件函数。如果在n秒内事件被重新触发，那么之前的计时会被重置。这种技术通常用于如模糊搜索、短信验证和文本编辑器实时保存等场景。

节流（Throttle）的工作原理是，当事件持续触发时，每n秒只执行一次函数。如果在n秒内事件被重复触发，那么只有第一次触发的事件会生效。这种技术常用于处理如scroll事件、浏览器播放事件和window的resize等场景。

防抖（Debounce）是指在一定时间内，当函数被频繁触发时，只有在最后一次触发后的延迟时间内，函数才会被真正执行。如果在延迟时间内又有触发事件发生，会重新开始计时。防抖技术常用于搜索框输入、按钮点击等场景，避免短时间内的频繁请求。

以下是一个简单的防抖示例代码：

// 创建一个防抖函数
function debounce(func, delay) {
 let debounceTimer;
 return function () {

   // 清除之前设置的定时器

   clearTimeout(debounceTimer);

   // 设置一个新的定时器，延迟 delay 毫秒后执行 func 函数

   debounceTimer = setTimeout(() => {

     func.apply(this, arguments);

   }, delay);

 }

}// 使用防抖函数
const searchInput = document.getElementById('searchInput');
const debouncedSearch = debounce(() => {

 console.log('执行搜索操作');

}, 500);
searchInput.addEventListener('keyup', debouncedSearch);

在上述示例中，创建了一个名为 debounce 的函数，它接受一个要执行的函数 func 和延迟时间 delay。在调用 debouncedSearch 函数时，会清除之前设置的定时器，并重新设置一个定时器，在延迟时间后执行 func 函数。

节流（Throttle）是指在一定时间内，无论函数被触发多少次，函数只会在固定的时间间隔内执行一次。如果在时间间隔内有多次触发事件，只会执行最后一次。节流技术常用于滚动事件、鼠标移动等场景，限制函数的执行频率。

以下是一个简单的节流示例代码：

// 创建一个节流函数function throttle(func, delay) {

 let canRun = true;

 return function () {

   if (canRun) {

     func.apply(this, arguments);

     canRun = false;

     setTimeout(() => {

       canRun = true;

     }, delay);

   }

 }

}


// 使用节流函数
const scrollEventHandler = throttle(() => {

 console.log('滚动事件触发');

}, 1000);
window.addEventListener('scroll', scrollEventHandler);

在上述示例中，创建了一个名为 throttle 的函数，它同样接受一个要执行的函数 func 和延迟时间 delay。在调用 throttle 函数时，如果 canRun 为 true，则执行 func 函数，并将 canRun 设置为 false。然后，通过设置一个定时器，在延迟时间后将 canRun 设置为 true，以便下一次函数调用。

防抖和节流的主要区别在于：防抖是在最后一次触发后的延迟时间内执行函数，而节流是在固定的时间间隔内执行函数。

选择使用防抖还是节流，取决于具体的业务需求和场景。防抖更适合处理连续的快速触发事件，而节流更适合限制频繁触发事件的执行频率。

希望这个解释对你有所帮助！如果你还有其他问题，请随时提问。

欢迎加入“前端组件开发学习”交流群，一起学习成长！可关注  “前端组件开发” 公众号后，私信后申请入群。