JavaScript中Debounce方法未执行问题求助

你的代码里debounce未执行的核心问题有两个：

1. debounce调用方式错误：debounce是高阶函数，它会返回一个经过防抖处理的新函数，而非直接执行传入的回调。你当前只是创建了防抖函数，但没有调用它。
2. 防抖状态无法保留：每次handleAtrributes执行时，都会生成全新的防抖函数，前一次的防抖状态丢失，根本起不到防抖作用。

正确写法示例 #

方案1：全局共享防抖函数（所有组件共用同一防抖逻辑） #

把防抖函数提取到handleAtrributes外部，确保每次触发都是同一个函数：

import { debounce } from "@/abc/def";

// 提前创建防抖后的函数
const debouncedScreenshot = debounce((component, canvas) => {
  getComponentScreenshot(component, canvas);
}, 600);

const handleAtrributes = async ({ attributes, canvas, component }) => {
  // 调用防抖后的函数
  debouncedScreenshot(component, canvas);
};

export const attributesHandler = (canvas) => {
  bus.on("attributeChange", (attributes, object) => {
    handleAtrributes({ canvas, attributes, component: object });
  });
};

方案2：针对不同组件单独防抖（避免组件间防抖逻辑干扰） #

如果需要每个组件的防抖逻辑独立，用对象存储各组件对应的防抖函数：

import { debounce } from "@/abc/def";

// 存储不同组件的防抖函数
const componentDebounceMap = new Map();

const handleAtrributes = async ({ attributes, canvas, component }) => {
  // 检查当前组件是否已有防抖函数，无则创建
  if (!componentDebounceMap.has(component)) {
    componentDebounceMap.set(
      component,
      debounce((comp, canv) => {
        getComponentScreenshot(comp, canv);
      }, 600)
    );
  }
  // 调用对应组件的防抖函数
  componentDebounceMap.get(component)(component, canvas);
};

export const attributesHandler = (canvas) => {
  bus.on("attributeChange", (attributes, object) => {
    handleAtrributes({ canvas, attributes, component: object });
  });
};

额外说明 #

若你导入的debounce支持配置参数（比如{ leading: true }实现首次调用立即执行），可按需调整防抖函数的创建逻辑。

内容的提问来源于stack exchange，提问作者JithinAji