一旦用戶停止在文本框中輸入，我有react應用程式并需要觸發一個功能。這是我嘗試過的。
const inputHandler =(e:SynthenticEvent) => {
let timer: any = null;
clearTimeout(timer);
timer = setTimeout(() => {
console.log('hi');
//in actual sending an Http request, however hiding it here for brevity
},1000);
}
<input type="text" onChange={inputHandler} name="userInput" />
到目前為止發生了什么，inputHandler在 1000 毫秒后觸發但它觸發了多次（例如 100 觸發 3 次，1000 觸發 4 次）
哪個不理想或不期望？
我想使用useEffect，但這樣做inputHandler()不在文本框識別/范圍內？
我正在尋找的是在 1000 毫秒后觸發該功能，但使用 texbox 的最新值觸發一次？
謝謝！
uj5u.com熱心網友回復：
這稱為去抖動
去抖功能。
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
}
}
使用它。
const handleChange = debounce(() => console.log('hi'))
<input type="text" onChange={inputHandler} name="userInput" />
uj5u.com熱心網友回復：
您可以使用Loadash-Debounce相同的
這是在這種情況下會有所幫助的文章。
代碼框示例
uj5u.com熱心網友回復：
您可以創建一個自定義掛鉤。請參閱此檔案以了解
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/494036.html
標籤：javascript 反应