JavaScript 防抖与节流怎么区分 leading 和 trailing-js教程-PHP中文网

区分 leading 和 trailing 的关键在于触发时机：设置 leading: true 时，函数在事件触发的瞬间立即执行；设置 trailing: true 时，函数在最后一次触发后等待指定时间再执行。通常通过传入 options 对象来配置这两个参数，默认情况下防抖（debounce）是 trailing 模式，而节流（throttle）则是 leading 模式。

JavaScript 防抖与节流怎么区分 leading 和 trailing

如何配置 debounce 的 leading 和 trailing 选项

在实现防抖函数时，可以通过检查 options.leading 来决定是否在调用开始时立即执行。如果 leading 为真，则在定时器启动前直接调用原函数，并重置定时器以处理后续的 trailing 调用。以下代码展示了完整的防抖实现及测试用例。

function debounce(func, wait, options = {}) {
  let timeoutId;
  let lastArgs;
  let lastThis;

  const later = function () {
    timeoutId = null;
    if (!options.leading && lastArgs) {
      func.apply(lastThis, lastArgs);
      lastArgs = lastThis = null;
    }
  };

  return function (...args) {
    lastArgs = args;
    lastThis = this;
    if (!timeoutId) {
      if (options.leading) {
        func.apply(this, args);
      }
      timeoutId = setTimeout(later, wait);
    } else {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(later, wait);
    }
  };
}

// 测试 leading: true
const logLeading = debounce(console.log, 300, { leading: true });
logLeading('A'); // 立即输出 A
setTimeout(() => logLeading('B'), 100); // 被忽略
setTimeout(() => logLeading('C'), 400); // 立即输出 C

// 测试 trailing: true (默认)
const logTrailing = debounce(console.log, 300, { trailing: true });
logTrailing('X'); // 被忽略
setTimeout(() => logTrailing('Y'), 100); // 被忽略
setTimeout(() => logTrailing('Z'), 400); // 300ms后输出 Z

如何配置 throttle 的 leading 和 trailing 选项

节流函数的核心逻辑是控制单位时间内的执行次数。默认情况下，节流函数在第一次触发时立即执行（leading），并在后续时间内忽略请求。如果需要仅在间隔结束时执行（trailing），则需要在定时器回调中判断是否还有未执行的调用。以下是基于同一输入源的节流实现对比。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

function throttle(func, wait, options = {}) {
  let timeoutId;
  let lastCallTime;
  let lastArgs;
  let lastThis;

  const later = function () {
    lastCallTime = Date.now();
    timeoutId = null;
    if (options.trailing && lastArgs) {
      func.apply(lastThis, lastArgs);
      lastArgs = lastThis = null;
    }
  };

  return function (...args) {
    const now = Date.now();
    const remaining = wait - (now - lastCallTime);
    lastArgs = args;
    lastThis = this;

    if (remaining  wait) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      lastCallTime = now;
      if (options.leading !== false) {
        func.apply(this, args);
      }
    } else if (!timeoutId && options.trailing !== false) {
      timeoutId = setTimeout(later, remaining);
    }
  };
}

// 测试 leading: true (默认)
const scrollLeading = throttle(console.log, 500, { leading: true });
scrollLeading('Start'); // 立即输出 Start
setTimeout(() => scrollLeading('Middle'), 200); // 被忽略
setTimeout(() => scrollLeading('End'), 600); // 立即输出 End

// 测试 trailing: true
const scrollTrailing = throttle(console.log, 500, { leading: false, trailing: true });
scrollTrailing('Start'); // 被忽略
setTimeout(() => scrollTrailing('Middle'), 200); // 被忽略
setTimeout(() => scrollTrailing('End'), 600); // 500ms后输出 End