函数节流（throttle）与函数去抖（deboun

函数节流（throttle）与函数去抖（debounce）是两种优化高频事件处理函数调用的策略，常用于浏览器环境以避免因短时间内大量函数调用导致的性能问题，例如窗口大小变化、滚动事件、输入框连续输入等场景。

1. 函数节流（Throttle）：

• 概念：在一定时间内，只允许一个函数执行一次。若在这段时间内多次触发该函数，则只有第一次生效，直到过了这个时间段，才会重新生效。

• 场景举例：监听窗口滚动事件时，我们并不需要实时获取滚动位置，而是希望在滚动停止或每过一段时间后才执行回调函数，减少计算量和渲染频率。

• 实现方法：

  function throttle(fn, delay) {
    let timer = null;
    let startTime = Date.now();
  
    return function () {
      const curTime = Date.now();
      const remaining = delay - (curTime - startTime);
  
      clearTimeout(timer);
  
      if (remaining <= 0) {
        fn.apply(this, arguments);
        startTime = Date.now();
      } else {
        timer = setTimeout(() => {
          fn.apply(this, arguments);
          startTime = Date.now();
        }, remaining);
      }
    };
  }
  
  // 使用示例
  const throttledFn = throttle(someExpensiveFunction, 500);
  window.addEventListener('scroll', throttledFn);
  

2. 函数去抖（Debounce）：

• 概念：在事件被触发后的规定时间段内，如果再次触发事件，则清除当前定时器并重新开始计时。只有当事件触发后的一段时间内没有再次触发事件，才会执行对应的回调函数。

• 场景举例：在输入框连续输入时，我们不需要对每一次输入都进行实时验证或搜索，而是在用户停止输入一段时间后再执行操作，提高用户体验及性能。

• 实现方法：

  function debounce(fn, delay) {
    let timer = null;
  
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    };
  }
  
  // 使用示例
  const debouncedFn = debounce(someExpensiveFunction, 300);
  inputElement.addEventListener('input', debouncedFn);
  

总结：函数节流关注的是在单位时间内只执行一次，而函数去抖更关心的是相邻两次调用的时间间隔，只有满足这个间隔才会执行。