防抖

防抖是指在事件触发后，延迟一定时间再执行回调函数。如果在延迟时间内又触发了该事件，则重新计时。这样可以避免在短时间内频繁触发事件导致的性能问题。

const debounce = (fn, delay) => {
  let timer = null; // 计时器
  return function (...args) {
    let context = null;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

节流

节流是指在一定时间内只执行一次回调函数。如果在该时间段内多次触发事件，只有第一次触发会执行回调函数，后续的触发会被忽略。

const throttle = (fn, limit) => {
  let flag = true; // 加锁
  let timer = null;

  return function (...args) {
    let context = this;
    if (!flag) return;

    flag = false; // 解锁
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
      flag = true;
    }, limit);
  };
}

区别

概念	防抖（Debounce）	节流（Throttle）
定义	将多次执行的操作变为最后一次执行的技术	将多次执行的操作变为每隔一段时间执行一次的技术
工作原理	在防抖触发高频率事件时，n秒后只会执行一次，如果n秒内再次触发，则会重新计算。每次触发时都会取消之前的延时调用。	在节流触发高频率事件时，每次触发事件都会设置一个延迟调用方法，并且取消之前延时调用的方法。每次触发事件时都会判断是否等待执行的延时函数。
应用场景	处理高频事件，如用户连续点击、窗口resize事件等，可避免因频繁执行导致性能问题。	处理连续触发的事件，如在一定时间内只执行一次的函数，可节省计算资源。