解释JS中的防抖与节流

在 JavaScript 中，防抖（debouncing）和节流（throttling）是两种优化高频率触发事件的方法，可以减少代码的执行次数，提高性能。

防抖

防抖是指在事件被频繁触发时，只有在一定时间内没有新的触发事件才会执行事件处理函数。在这段时间内，如果事件又被触发，则重新计时。

防抖的实现思路是：在事件处理函数执行前，设置一个定时器，如果在定时器时间内再次触发了事件，则清除原定时器并重新设置一个新的定时器，如此反复。如果在定时器时间内没有再次触发事件，则执行事件处理函数。

防抖的应用场景包括：搜索框输入、窗口调整等需要频繁触发事件时，可以通过防抖来减少事件处理函数的执行次数。

示例代码：

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

const searchInput = document.getElementById("search-input");
const searchHandler = function () {
  console.log("执行搜索操作");
};
searchInput.addEventListener("input", debounce(searchHandler, 500));

上面的代码中，`debounce` 函数接受一个事件处理函数和一个时间间隔作为参数，返回一个新的函数，这个新函数在被调用时会执行事件处理函数，但是在执行前会设置一个定时器，如果在时间间隔内再次被调用，则会清除原定时器并重新设置一个新的定时器。

节流

节流是指在事件被频繁触发时，只有在一定时间间隔内执行一次事件处理函数。在这段时间内，如果事件又被触发，则忽略这次触发。

节流的实现思路是：在事件处理函数执行前，判断距离上一次执行的时间间隔是否超过了指定的时间间隔，如果超过了，则执行事件处理函数并更新上一次执行时间；否则忽略这次事件触发。

节流的应用场景包括：页面滚动、DOM 元素拖拽等需要频繁触发事件时，可以通过节流来减少事件处理函数的执行次数。

示例代码：

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

const scrollHandler = function () {
  console.log("执行页面滚动操作");
};
window.addEventListener("scroll", throttle(scrollHandler, 500));

上面的代码中，`throttle` 函数接受一个事件处理函数和一个时间间隔作为参数，返回一个新的函数，这个新函数在被调用时会执行事件处理函数，但是在执行前会判断距离上一次执行的时间间隔是否超过了指定的时间间隔，如果超过了，则执行事件处理函数并更新上一次执行时间；否则忽略这次事件触发。