【防抖和节流】

什么是防抖（debounce）

防抖指的是：某个操作频繁触发时，只在最后一次触发后过一段时间才真正执行函数。
换句话说，如果这个时间段内再次触发，就重新计时。

核心思路： 不停清除之前的定时器，只有停下来一段时间才执行。

防抖应用场景

输入框实时搜索：用户输入完成一段时间后再去请求接口，减少请求次数。

窗口 resize：只在用户停止拖拽窗口一段时间后，重新计算布局。

表单验证：输入停止一段时间后再进行校验。

手写防抖代码

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

使用示例：

window.addEventListener('resize', debounce(() => {
  console.log('窗口大小变化完毕');
}, 500));

什么是节流（throttle）

节流指的是：某个操作频繁触发时，规定在一个时间段内只执行一次函数，无论这个时间段内触发多少次。

核心思路： 每隔固定时间执行一次，期间的多次触发都会被忽略。

节流应用场景

页面滚动（scroll）：监听页面滚动位置，每隔一段时间处理一次，比如吸顶导航。

点击按钮提交：防止用户短时间内重复点击提交按钮。

拖拽事件：每隔一段时间更新位置，而不是每像素都更新。

手写节流代码

function throttle(fn, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

使用示例：

window.addEventListener('scroll', throttle(() => {
  console.log('滚动事件触发');
}, 200));

防抖 vs 节流的区别

对比点	防抖	节流
执行时机	停止触发后一段时间执行一次	每隔固定时间执行一次
主要作用	减少调用次数	平均分配调用频率
应用场景	输入、验证、搜索	滚动、拖拽、点击