防抖和节流

防抖（Debounce）是一种在处理频繁触发的事件时，延迟执行函数的技术。它能够确保只有在一连串事件结束后，才执行一次函数。以下是一个简单的 JavaScript 防抖函数的实现：

function debounce(func, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 示例用法：
function handleInput() {
  console.log("Input event triggered");
}

const debouncedHandleInput = debounce(handleInput, 500);

// 模拟输入事件的调用
debouncedHandleInput(); // 不会立即执行
debouncedHandleInput(); // 不会立即执行
debouncedHandleInput(); // 不会立即执行

// 等待 500 毫秒后，handleInput 执行一次

在上述例子中，debounce 函数接受一个要防抖的函数 func 和一个延迟时间 delay。返回的函数（这里是 debouncedHandleInput）可以安全地被频繁触发，但是实际执行 func 函数的调用会被推迟到最后一次调用后的 delay 毫秒。

请注意，防抖函数返回的函数使用了 apply 来确保函数在执行时具有正确的上下文（this）。另外，防抖函数还使用了闭包来保持对 timer 的引用，以便能够清除上一个定时器并设置新的定时器。

节流（Throttle）是一种限制函数在一定时间间隔内执行的技术，确保函数不会以太高的频率执行。以下是一个简单的 JavaScript 节流函数的实现

function throttle(func, delay) {
  let lastExecTime = 0;
  let timeoutId;

  return function (...args) {
    const now = Date.now();

    if (now - lastExecTime < delay) {
      clearTimeout(timeoutId);

      timeoutId = setTimeout(() => {
        lastExecTime = now;
        func.apply(this, args);
      }, delay);
    } else {
      lastExecTime = now;
      func.apply(this, args);
    }
  };
}

// 示例用法：
function handleScroll() {
  console.log("Scroll event triggered");
}

const throttledHandleScroll = throttle(handleScroll, 200);

// 模拟滚动事件的调用
throttledHandleScroll(); // 第一次会立即执行
throttledHandleScroll(); // 在 200 毫秒内不会执行
throttledHandleScroll(); // 在 200 毫秒内不会执行

// 200 毫秒后，handleScroll 执行一次

在上述例子中，throttle 函数接受一个要节流的函数 func 和一个时间间隔 delay。返回的函数（这里是 throttledHandleScroll）可以被调用，但是实际执行 func 函数的调用会被限制在时间间隔内。

请注意，节流函数使用了闭包来保持对 lastExecTime 和 timeoutId 的引用。Date.now() 用于获取当前时间戳，以便比较上一次执行函数的时间。如果在时间间隔内再次触发，会清除之前的定时器并设置一个新的定时器来延迟执行。如果在时间间隔外触发，会立即执行并更新 lastExecTime。