调用setTimeout中的async函数

Question

我正在尝试使用d3滑块和react so to throttle redux操作。

我使用以下代码

export const changeNumber = (number) => (dispatch, getState) => {
// Clear old timeId
if (getState().time.timeId !== null) {  
clearTimeout(getState().time.timeId);
}
// Create new timeId
const timeId = setTimeout(() => {

dispatch(debounceChangeNumber(number));
}, 1000);
// refresh to new timeId
dispatch(updateTimeId(timeId));

};
export const debounceChangeNumber = (number) => {
return {
type: "CHANGE_NUMBER",
payload: number,
};
};
// Throttle redux call, refresh to new timeId
export const updateTimeId = (timeId) => {
return {
type: "UPDATE_TIME_ID",
payload: timeId,
};
};

在多个操作中使用相同的timeId有点困难，如果我使用相同的timeId，内部操作应该如何异步？像

const timeId = setTimeout(() => {
// These actions should be asynchronous
dispatch(debounceChangeNumber(number));
dispacth(funcA());
dispacth(funcB());
....
}, 5000);

我真的很想知道哪种方法是处理这种事情的最佳方法，因为如果我在更大的应用程序中使用它，我必须为每个组件创建新的timeId状态。

Answer 1

自己做这件事相当复杂，但有利于学习。

要获得转发，请使用您已经使用的库中的debounce函数(例如_.debounce(或获得useDebounce钩子(https://github.com/xnimorz/use-debounce)

如果你想这样做是为了学习，这是一个很好的教程：https://davidwalsh.name/javascript-debounce-function