JavaScript的防抖与节流

概念

js中的防抖（debounce）和节流（throttle）是用于控制函数执行频率的技术。

防抖

当一个事件连续触发时，防抖技术将只执行最后一次触发事件的函数调用。换句话说，只有在停止触发事件一段时间后，才会执行函数。(即：n秒后再执行该事件，若在n秒内被重复触发，则重新计时)

场景：

1. 输入框输入自动模糊查询数据：用户在输入时，如果一直输入，会频繁触发查询请求，使用防抖可以减少请求的次数，只在用户停止输入后才发送请求。
2. 页面滚动加载更多：当用户滚动页面时，会频繁触发加载更多数据的函数，使用防抖可以减少请求的次数，只在用户停止滚动后才发送请求。

//防抖示例
function debounce(func, wait) {  
  let timeout;  
  return function() {  
    const context = this;  
    const args = arguments;  
    clearTimeout(timeout);  
    timeout = setTimeout(function() {  
      func.apply(context, args);  
    }, wait);  
  };  
}
//使用 输入框输入时添加一个200ms的延时 若200ms内重复执行则重新计时
const input = document.querySelector('input');  
input.addEventListener('input', debounce(function() {  
  console.log('Input value:', input.value);  
}, 200));

节流

当一个事件连续触发时，用节流限制函数的执行频率。换句话说，函数在一段时间内只会执行一次。（即：n秒内只运行一次，若在n秒内重复触发，只有一次生效）

场景：

1. 页面滚动事件：当用户滚动页面时，会触发滚动事件，如果不使用节流技术，可能会导致页面卡顿。使用节流可以限制滚动事件的触发频率，减少卡顿现象。

//节流示例
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);  
    }  
  };  
}
//使用 一样也是添加200ms延时 但是200ms内重复调用 只执行一次
const input = document.querySelector('input');  
input.addEventListener('input', throttle(function() {  
  console.log('Input value:', input.value);  
}, 200));

总结

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

区别：

1. 触发时刻：
   • 防抖：只有在事件停止触发一段时间后，才会执行函数。
   • 节流：在一段时间内只会执行一次函数。
2. 执行次数：
   • 防抖：只会执行最后一次触发事件的函数调用。
   • 节流：在一段时间内只会执行一次函数调用。
3. 实现方式：
   • 防抖：在事件触发后设置一个定时器，在定时器延迟时间内没有再次触发事件，则执行函数。
   • 节流：在事件触发时设置一个定时器，在定时器延迟时间内触发事件则不执行函数。只有当定时器执行完毕后，才能再次触发执行函数。
4. 使用场景：
   • 防抖：适用于连续事件触发的情况，如搜索框输入、滚动加载更多等。
   • 节流：适用于高频率事件触发的情况，如页面滚动、鼠标移动等。