我的場(chǎng)景:
我有一個(gè)列表,我考慮用戶連續(xù)點(diǎn)擊刪除的情況,如果用戶連續(xù)點(diǎn)擊,可能會(huì)導(dǎo)致數(shù)據(jù)庫(kù)中的數(shù)據(jù)被刪除了,但是我還需要刷新數(shù)據(jù)列表才能反應(yīng)到頁(yè)面上,可是這時(shí)候用戶又點(diǎn)擊了同一條數(shù)據(jù)的刪除按鈕多次,導(dǎo)致發(fā)起了多次刪除一個(gè)已經(jīng)不存在的數(shù)據(jù)的請(qǐng)求,于是接口報(bào)錯(cuò)。于是我加上了loadash.throttle。
問題:
但是在使用了lodash.throttle后,我發(fā)現(xiàn)在連續(xù)點(diǎn)擊的過程中是按照我預(yù)想的進(jìn)行的,的確有進(jìn)行節(jié)流,但是在我我連續(xù)點(diǎn)擊后,這一輪點(diǎn)擊下來還是會(huì)報(bào)錯(cuò)一次,我查看請(qǐng)求,發(fā)現(xiàn)是最后一次的請(qǐng)求報(bào)的錯(cuò)。 而且這問題是必現(xiàn)的,只要出現(xiàn)了連續(xù)點(diǎn)擊。
猜想:
是不是lodash.throttle中的設(shè)計(jì)邏輯就是默認(rèn)會(huì)把最后一次請(qǐng)求給發(fā)送出去,也就是為了適用于輸入框的場(chǎng)景,于是我查了一下,果真如此:
文章來源:http://www.zghlxwxcb.cn/news/detail-812120.html
解決方案:文章來源地址http://www.zghlxwxcb.cn/news/detail-812120.html
const _ = require('lodash');
// 原始的要節(jié)流的函數(shù)
function myFunction() {
console.log('Function called');
}
// 使用throttle創(chuàng)建一個(gè)節(jié)流函數(shù),{ trailing: false }表示取消執(zhí)行最后一次
const throttledFunction = _.throttle(myFunction, 1000, { trailing: false });
// 在一定時(shí)間間隔內(nèi)多次調(diào)用
throttledFunction();
setTimeout(() => throttledFunction(), 500);
setTimeout(() => throttledFunction(), 1000);
setTimeout(() => throttledFunction(), 1500);
? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
到了這里,關(guān)于取消lodash.throttle中的默認(rèn)執(zhí)行完最后一次函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!