防抖和节流的区别

　防抖是在指定时间内只执行一次，如果 再次触发则重新计时 ，即只处理 最后一次响应 。
　节流是在指定时间内只执行一次，如果再次触发则不执行，也就是 只执行第一次，后面的触发不管，等到时间过去才再响应一次触发。

　防抖常用在输入框搜索、滚动加载、表单提交等高频触发只用处理最后一次响应的地方。
　节流常用在滚动监听、窗口变化等，在高频的变化中一段时间内只响应第一次变化，并给出多个中间态，以实现 平滑 的变化。

手写实现防抖

/**
 * 防抖在是指定时间内只执行一次，如果再次触发则重新计时
 * 一段时间内只处理最后一次事件响应
 * 定时器实现
 */
function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    console.log(args);
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const log = debounce((...args) => {
  console.log("防抖，只执行",args);
}, 100);

log(1, 2, 3);
log(4, 5, 6);

setTimeout(() => {
  log(7, 8, 9);
}, 1000);

效果：

手写实现节流

/**
 * 节流是指定时间内只执行一次，如果再次触发则不执行
 * 一段时间内只处理第一次事件响应
 * 定时器实现
 */
function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    console.log(args);
    // 当第一次获得定时器后，除非定时器到时清除，都会阻止后面的触发
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

/**
 * 时间戳实现
 */
function throttle(fn, delay) {
  let last = 0; // 设置为0 确保第一次触发
  return function (...args) {
    console.log(args);
    const now = Date.now();
    // 下一次超过间隔时间才执行
    if (now - last >= delay) {
      fn.apply(this, args);
      last = now;
    }
  };
}

const log = throttle((...args) => {
  console.log("节流，只执行", args);
}, 100);

log(1, 2, 3);
log(4, 5, 6);

setTimeout(() => {
  log(7, 8, 9);
}, 1000);

效果：