1、防抖和节流，应用场景

防抖和节流是前端开发中常用的优化技术，用于减少一些高频触发的事件的执行次数，提升页面性能和用户体验。它们的应用场景如下：

1. 防抖：当一个事件被触发后，会在 n 秒后执行，如果在这 n 秒内又触发了该事件，则重新计时，在下一个 n 秒后再执行，以此类推[^1]。应用场景包括搜索框输入、窗口大小调整等。

2. 节流：当一个事件被触发后，在一定时间内只执行一次，之后无论该事件触发多少次都不再执行，等到一段时间后再次执行，以此类推[^2]。应用场景包括页面滚动加载、鼠标拖拽等。

以下是防抖和节流的具体实现方法：

1. 防抖

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

2. 节流

function throttle(fn, delay) {
  let canRun = true;
  return function() {
    let context = this;
    let args = arguments;
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(context, args);
      canRun = true;
    }, delay);
  };
}