JavaScript的防抖和节流技术

在 JavaScript 中，防抖和节流是常见的优化技术，用于控制函数的执行次数，从而提高性能。防抖和节流都是通过限制函数的执行频率来实现的，但它们的实现方式略有不同。

防抖（Debounce）

防抖的原理是在一定的时间内只执行最后一次操作，如果在这段时间内再次触发，则重新计时。这可以防止在一定时间内频繁地触发函数，例如当用户在输入框中输入文本时，如果每次输入都会触发请求，则会给服务器带来很大的压力，而使用防抖可以让请求在用户停止输入一段时间后再发送，从而降低请求频率。下面是一个防抖函数的实现：

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);
  }
}

上面的实现中，使用了闭包来保存定时器变量 timer，当函数被调用时，首先清除之前的定时器，然后重新创建一个定时器，并在一定时间后执行传入的函数 func。

节流（Throttle）

节流的原理是在一定时间内只执行一次操作，如果在这段时间内再次触发，则忽略该操作。这可以避免在短时间内连续触发函数，例如当用户滚动页面时，如果每次滚动都会触发回调函数，则会导致页面卡顿，而使用节流可以让回调函数在一定时间内只执行一次，从而减少回调函数的执行次数。下面是一个节流函数的实现：

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

上面的实现中，使用了闭包来保存定时器变量 timer，当函数被调用时，如果定时器不存在，则创建一个定时器，并在一定时间后执行传入的函数 func，否则忽略该操作。