const useDebounce = (delay = 300, immediate = false) => {
const timer = ref(null);
const isPending = ref(false);
const debounce = (fn) => {
return (...args) => {
isPending.value = true;
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
const callNow = immediate && !timer.value;
if (callNow) {
fn.apply(this, args);
isPending.value = false;
}
timer.value = setTimeout(() => {
if (!callNow) {
fn.apply(this, args);
isPending.value = false;
}
timer.value = null;
}, delay);
};
};
const cancel = () => {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
isPending.value = false;
}
};
return { debounce, cancel, isPending };
};
const { debounce, cancel, isPending: pendingState } = useDebounce(delay.value, immediate.value);
// 創(chuàng)建防抖函數(shù)
const debouncedExecute = debounce(executeAction);
debouncedExecute ()
vue3 多實(shí)例防抖Hook實(shí)現(xiàn)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 目錄 vue2源碼[http://www.itdecent.cn/p/3f0bd41aa1ba] vue3源碼[...
- 1.Hook函數(shù) hooks是一種開發(fā)思想,我們可以利用hooks把相關(guān)代碼剝離出去。hook有個編碼習(xí)慣是用us...
- hook是什么? 搜索到的結(jié)果是這么描述的: vue3中的hooks其實(shí)是函數(shù)的寫法,就是將文件的一些單獨(dú)功能的j...