详细讲解js的防抖和节流

防抖和节流是优化JavaScript性能的两种常见方法。

## 防抖

防抖是指在一段时间内，只执行最后一次事件，而忽略在这段时间内发生的其他事件。通常用于用户频繁操作的场景，例如按钮点击、滚动事件等。

实现防抖可以用setTimeout来实现，例如：

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

在这个例子中，debounce函数接收两个参数，第一个是需要防抖的函数，第二个是延迟时间。返回一个函数，每次调用这个函数时，首先清除之前设置的定时器，然后再设置一个新的定时器。如果在延迟时间内多次调用这个函数，只有最后一次调用会被执行。

## 节流

节流是指在一段时间内，只执行一次事件，而忽略在这段时间内发生的其他事件。通常用于用户频繁触发事件，例如鼠标移动、窗口resize等。

实现节流可以用setTimeout和时间戳来实现，例如：

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

在这个例子中，throttle函数接收两个参数，第一个是需要节流的函数，第二个是时间间隔。返回一个函数，每次调用这个函数时，判断当前时间与上次调用时间的时间差是否大于等于时间间隔，如果大于等于，执行函数并更新上次调用时间；否则，清除之前设置的定时器，并设置一个新的定时器，延迟时间为时间间隔减去时间差。这样，在时间间隔内多次调用这个函数，只有第一次调用会被执行。