JavaScript 中的防抖和节流的应用场景

防抖和节流都是一些前端优化技术，用于控制 JavaScript 代码的执行频率。它们可以有效减少一些耗时操作对页面性能的影响，提高用户体验。

防抖（Debounce）是指在短时间内连续触发同一事件时，只会执行一次处理函数，并且在最后一次触发之后指定的时间间隔内不再执行。常见的应用场景包括搜索框输入时实时搜索、窗口大小调整后重新布局等等。

节流（Throttle）则是指当持续触发事件时，每隔一段时间只执行一次处理函数。例如，当用户快速滚动页面时，监听页面滚动事件并不需要每次都执行处理函数，而是每隔一定时间才执行一次。常见的应用场景包括页面滚动加载、点击按钮防止重复提交等等。

以下是两种方法的实现代码：

防抖

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

在上面的代码中，我们定义了一个 debounce 函数，它接受两个参数：要执行的处理函数和设定的时间间隔。我们创建了一个计时器，在设定的时间间隔内检测是否有新的事件触发，如果有，则清除计时器并重新开始计时。否则，执行处理函数并传递参数。

节流

function throttle(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

在上面的代码中，我们定义了一个 throttle 函数，它接受两个参数：要执行的处理函数和设定的时间间隔。我们创建了一个计时器，在设定的时间间隔内只允许执行一次处理函数。如果在这段时间内再次触发，则忽略它。当计时器完成后，将其重置为 null，以便下一次执行。