JavaScript如何利用防抖与节流优化网页性能

/**
 * 经典防抖：最后一次触发后等待delay毫秒执行
 * @param {Function} fn - 目标函数
 * @param {number} delay - 延迟时间(ms)
 * @returns {Function} - 防抖处理后的函数
*/
function debounce(fn, delay) {
  // 用于保存定时器ID的闭包变量
  let timer;

  // 返回一个包装后的新函数
  return function(...args) {
    // 如果已存在定时器，先清除之前的（避免多次触发）
    if (timer) clearTimeout(timer);

    // 设置新的定时器，在延迟时间后执行原函数
    timer = setTimeout(() => {
      // 使用apply保持原函数的this指向和参数
      fn.apply(this, args);
      // 执行后重置定时器变量（非必须，但有助于垃圾回收）
      timer = null;
    }, delay);
  };
}

/**
 * 立即执行版防抖：首次触发立即执行，之后进入冷却期
 * @param {Function} fn    - 需要防抖的原始函数
 * @param {number}  wait   - 冷却时间（毫秒）
 * @returns {Function}     - 经过防抖处理的新函数
 */
function debounceImmediate(fn, wait) {
  // 用于保存定时器 ID 的闭包变量
  let timer;

  // 返回一个包装后的新函数
  return function (...args) {
    // 如果已经有定时器，先清除（重置冷却期）
    if (timer) clearTimeout(timer);

    // 判断是否应该立即执行
    // 当 timer 为 null/undefined 时（即首次触发或已冷却完毕），shouldCallNow 为 true
    const shouldCallNow = !timer;

    // 设置新的定时器
    // 定时器到期后把 timer 置空，表示冷却期结束
    timer = setTimeout(() => {
      timer = null;
    }, wait);

    // 如果需要立即执行，则立即调用原函数
    if (shouldCallNow) {
      fn.apply(this, args);
    }
  };
}

/**
 * 定时器版节流（保证周期末尾执行）
 * @param {Function} fn - 需要节流的函数
 * @param {number} wait - 执行间隔(ms)
 * @returns {Function} - 节流处理后的函数
 */
function throttleByTimer(fn, wait) {
    let timer = null;
    
    return function(...args) {
        const context = this;
        
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args);
                timer = null;
            }, wait);
        }
    };
}

/**
 * 时间戳版节流（保证周期开始执行）
 * @param {Function} fn - 需要节流的函数
 * @param {number} wait - 执行间隔(ms)
 * @returns {Function} - 节流处理后的函数
 */
function throttleByTimestamp(fn, wait) {
    let prev = 0; // 上次执行时间戳
    
    return function(...args) {
        const now = Date.now();
        
        if (now - prev >= wait) {
            fn.apply(this, args);
            prev = now;
        }
    };
}