Lodash 去抖仅延迟第一次调用

Question

我有一个输入框，用户可以在其中手动输入数量以及加号（+）减号（-），以便他们可以通过单击加号或减号来添加/删除。

我想要实现的是，当用户点击时，比如说多次加号，而不是在 500 毫秒后多次发送该 post 请求，而是在用户停止点击 500 毫秒时发送请求。

debounce 功能来自 lodash

这是我的代码；

  const debouncedUpdateItemQuantity = debounce((id, qty) => {
     updateItemQuantity(id, qty);
  }, 500);


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

};

和我的html

 <div>
   <span
     onClick={() => debouncedUpdateItemQuantity(id,itemQty)}
   > 
     - 
   </span>
   <input
     type="text"
     value={itemQty}
   />

   <span
     onClick={() => debouncedUpdateItemQuantity(id,itemQty)}
   > 
     + 
   </span>
 </div>

此代码会延迟第一次调用，但如果用户点击 10 次，则会在 500 毫秒后请求所有其他点击。我怎样才能防止这种情况以及如何才能在用户等待 500 毫秒后只获取最后一次点击。预先感谢

Answer 1

问题是您在反应组件的渲染函数（函数组件的函数本身）中使用

debounce

。每当 React 重新渲染该组件时，

debounce

就会再次被调用。您需要 useCallback 才能使其正常工作。像这样的东西：

import {useCallback} from "react"

const debouncedUpdateItemQuantity = useCallback(debounce((id, qty) => {
    updateItemQuantity(id, qty);
}, 500))


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