防抖和节流的区别及实现方法是什么？

防抖与节流是用于优化前端高频事件执行频率的技术手段，主要通过函数控制减少函数调用次数，提升性能。两者的核心区别在于处理连续事件的方式不同。

1. 防抖与节流的区别

• 防抖(Debounce):
  • 多次高频触发事件时，只有在停止触发后延迟一定时间才执行最后一次函数调用。
  • 应用场景：搜索框输入完成发送请求（确保用户停止输入）、窗口resize操作完成后重布局（避免频繁重绘）、按钮去防止重复点击（只执行最后单击）。
• 节流(Throttle):
  • 多将多次执行变间隔执行次高频触发事件时，保证每隔固定时间区间只执行函数一次。
  • 应用场景：页面滚动加载内容（滚动时按时间间隔执行）、鼠标移动时更新位置信息（定期刷新）、实时通信限制发送率。

两者差异表：

技术	执行时机	适用场景
防抖	事件停止后延迟执行最后一次	输入完成、界面稳定动作
节流	固定时间间隔执行一次	滚动、移动等需要定期响应动作

区别关键：防抖重置倒计时到停止执行，节流强制时间间隔内单次执行；防抖适合于需用户完成行为（等待事件结束），节流适合于连续高频动作需流线处理（控制触发频率）。

2. 实现方法

实现基于JavaScript中的setTimeout或时间戳验证。

防抖函数标准实现

使用定时器：在指定延迟期间如果有新事件触发，会重置定时并忽略执行。

function debounce(func, delay) {
  let timer = null; // 封装延迟执行
  return function(...args) {
    clearTimeout(timer); // 每次新事件重置定时器
    timer = setTimeout(() => { // 定时后才触发 func
      func.apply(this, args);
    }, delay);
  };
}
// 使用示例：绑定 input 事件延迟 300ms
const debouncedHandler = debounce(() => {
  console.log("输入稳定执行搜尋！");
}, 300);
inputElement.addEventListener('input', debouncedHandler);

节流函数标准实现

基于时间戳或节流标志。确保固定间隔执行。

function throttle(func, limit) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now(); // 检查当前距上时间
    if (now - lastTime < limit) return; // 间隔过小则跳过执行
    lastTime = now; // 更新最近执行时间
    func.apply(this, args); // 执行函数
  };
}
// 使用示例：绑定滚动事件，每100ms至少执行一次
const throttledHandler = throttle(() => {
  console.log("滚动加载了新內容");
}, 100);
window.addEventListener('scroll', throttledHandler);

应用中结合具体情况选用两种技术可大幅提升界面体验与资源效率。