js 如何实现函数节流

setTimeout

function throttle(func, delay) {
  let timeoutId = null; // 用于存储定时器ID

  return function(...args) { // 返回一个新函数，接收所有参数
    // 如果当前没有正在等待执行的定时器
    if (!timeoutId) {
      // 设置一个定时器
      timeoutId = setTimeout(() => {
        // 定时器触发时，执行原始函数，并确保this上下文和参数正确传递
        func.apply(this, args);
        // 执行完毕后，清除定时器ID，允许下一次节流触发
        timeoutId = null;
      }, delay);
    }
  };
}

// 示例用法：
// const handleScroll = throttle(() => {
//   console.log('滚动事件被节流了！');
// }, 200);
// window.addEventListener('scroll', handleScroll);

timeoutId

null

leading

trailing

this

function throttle(func, wait, options = {}) {
  let timeoutId;
  let lastArgs;
  let lastThis;
  let lastResult; // 存储最后一次执行的结果
  let lastCallTime = 0; // 记录上次函数实际执行的时间戳

  // 默认开启前沿和后沿执行
  const leading = options.leading === undefined ? true : !!options.leading;
  const trailing = options.trailing === undefined ? true : !!options.trailing;

  // 内部执行函数，处理上下文和参数
  const invokeFunc = (time) => {
    lastResult = func.apply(lastThis, lastArgs);
    lastCallTime = time; // 更新上次执行时间
  };

  const throttled = function(...args) {
    const now = Date.now(); // 当前时间
    lastArgs = args;
    lastThis = this;

    // 如果是第一次调用，并且leading为false，则将lastCallTime设置为当前时间
    // 这样可以跳过第一次的立即执行
    if (!lastCallTime && !leading) {
      lastCallTime = now;
    }

    // 计算距离下次执行还需要等待的时间
    const remaining = wait - (now - lastCallTime);

    // 如果时间已到或者系统时间被修改（remaining可能为负数或超过wait）
    if (remaining <= 0 || remaining > wait) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      lastCallTime = now; // 更新执行时间
      invokeFunc(now); // 立即执行
    } else if (!timeoutId && trailing) { // 如果没有正在等待的定时器，并且开启了trailing
      // 设置一个定时器，在剩余时间后执行
      timeoutId = setTimeout(() => {
        lastCallTime = Date.now(); // 更新执行时间为定时器触发时的时间
        timeoutId = null;
        invokeFunc(lastCallTime);
      }, remaining);
    }
    return lastResult; // 返回最后一次执行的结果
  };

  // 添加一个取消节流的方法
  throttled.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
    lastCallTime = 0;
  };

  return throttled;
}

// 示例用法：
// // 默认模式：第一次立即执行，之后每200ms最多执行一次，事件停止后若有待执行的也会执行最后一次
// const throttledScroll = throttle(() => console.log('Scroll!'), 200);
// window.addEventListener('scroll', throttledScroll);

// // 只在事件停止后执行（类似防抖，但仍然有节流的效果，即在wait时间内不会重复执行）
// const throttledResizeTrailing = throttle(() => console.log('Resize trailing!'), 300, { leading: false, trailing: true });
// window.addEventListener('resize', throttledResizeTrailing);

// // 第一次立即执行，之后每300ms最多执行一次，但事件停止后不再执行（如果最后一次触发在等待期内）
// const throttledClickLeading = throttle(() => console.log('Click!'), 300, { leading: true, trailing: false });
// document.getElementById('myButton').addEventListener('click', throttledClickLeading);

lastCallTime

remaining