Lodash debounce仅延迟首次调用，多次点击重复触发请求的解决方法

你遇到的核心问题是：组件每次重新渲染时，debouncedUpdateItemQuantity都会被重新创建为一个全新的防抖函数实例。每次点击+/-按钮时，调用的都是不同的防抖函数，每个函数都会独立触发延迟，最终导致多次请求被发送。

用React的useCallback包裹防抖函数，确保组件生命周期内始终复用同一个防抖实例；同时调整事件逻辑，保证传递最新的数量值。

修改后的代码 #

函数逻辑部分 #

import { useCallback } from 'react';
import { debounce } from 'lodash';

// 组件内部
const debouncedUpdateItemQuantity = useCallback(
  debounce((id, qty) => {
    updateItemQuantity(id, qty);
  }, 500),
  [] // 空依赖数组，确保仅在组件首次渲染时创建一次防抖函数
);

const updateItemQuantity = (id, qty) => {
  dispatch(
    updateQuantity(
      id,
      qty,
      () => {
        dispatch(getBasket());
      }
    )
  );
};

交互部分（含输入框处理） #

<div>
  <span onClick={() => {
    const newQty = itemQty - 1;
    setItemQty(newQty);
    debouncedUpdateItemQuantity(id, newQty);
  }}>
    -
  </span>
  <input
    type="text"
    value={itemQty}
    onChange={(e) => {
      const newQty = e.target.value;
      setItemQty(newQty);
      debouncedUpdateItemQuantity(id, newQty);
    }}
  />
  <span onClick={() => {
    const newQty = itemQty + 1;
    setItemQty(newQty);
    debouncedUpdateItemQuantity(id, newQty);
  }}>
    +
  </span>
</div>

关键说明 #

1. useCallback的作用：缓存防抖函数的引用，避免组件每次渲染时生成新的防抖实例，确保所有点击/输入事件都复用同一个防抖逻辑，这样多次触发时会自动重置延迟，仅在最后一次操作停止500ms后发送请求。
2. Lodash Debounce默认行为：默认配置trailing: true、leading: false，正好符合你的需求——停止操作后执行最后一次请求，不会在首次点击时立即触发。
3. 数量值的准确性：点击+/-时直接计算最新数量并传递，避免React state异步更新导致的数值滞后问题。

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