TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊
實(shí)現(xiàn)此目的的一種方法是將承諾傳遞給一個(gè)函數(shù)，該函數(shù)將僅在查詢花費(fèi)的時(shí)間超過指定時(shí)間（使用超時(shí)）時(shí)this.query(term)處理觸發(fā)。toggleWaiting
例如，下面的代碼接受一個(gè) Promise，waitingFn一個(gè)將使用isWaiting狀態(tài)來(lái)調(diào)用的函數(shù) ( )，以及timeout可用于指定在顯示加載微調(diào)器之前要等待的時(shí)間。最后，當(dāng)承諾完成后，我們返回結(jié)果：
async function handleWaiting(promise, waitingFn, timeout) {
let loadingStarted = false;
let timeoutInstance = null;
const timeoutPromise = new Promise((res) => {
timeoutInstance = setTimeout(() => {
loadingStarted = true;
waitingFn(true);
}, timeout);
return res();
});
function onFinished() {
clearTimeout(timeoutInstance);
if (loadingStarted) {
waitingFn(false);
}
}
try {
const [result] = await Promise.all([promise, timeoutPromise]);
onFinished();
return result;
} catch (ex) {
onFinished();
throw ex;
}
}
handleWaiting您可以像這樣調(diào)用該函數(shù)：
const result = await handleWaiting(this.query(term), (isWaiting) => this.toggleWaiting(), 500);
正如 @FZs 和 @Bergi 所指出的（謝謝你們），下面是由于使用 Promise 構(gòu)造函數(shù)而導(dǎo)致的反模式：
function handleWaiting(promise, waitingFn, timeout) {
return new Promise((res, rej) => {
let loadingStarted = false;
const timeoutInstance = setTimeout(() => {
loadingStarted = true;
waitingFn(true);
}, timeout);
function onFinished() {
if (loadingStarted) {
waitingFn(false);
}
clearTimeout(timeoutInstance);
}
return promise
.then((result) => {
onFinished();
res(result);
})
.catch((ex) => {
onFinished();
rej(ex);
});
});
}
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
在我的 alpineJs 對(duì)象中 - 我有這個(gè)實(shí)現(xiàn)：
{
? ?waiting: false,
? ?async handleWaiting(promise, timeout) {
? ? ? ?return new Promise((res, rej) => {
? ? ? ? ? ?let loadingStarted = false;
? ? ? ? ? ?const timeoutInstance = setTimeout(() => {
? ? ? ? ? ? ? ?loadingStarted = true;
? ? ? ? ? ? ? ?this.waiting = true;
? ? ? ? ? ?}, timeout);
? ? ? ? ? ?const onFinished = () => {
? ? ? ? ? ? ? ?if (loadingStarted) {
? ? ? ? ? ? ? ? ? ?this.waiting = false;
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?clearTimeout(timeoutInstance);
? ? ? ? ? ?}
? ? ? ? ? ?promise
? ? ? ? ? ? ? ?.then((result) => {
? ? ? ? ? ? ? ? ? ?onFinished();
? ? ? ? ? ? ? ? ? ?res(result);
? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?.catch((ex) => {
? ? ? ? ? ? ? ? ? ?onFinished();
? ? ? ? ? ? ? ? ? ?rej(ex);
? ? ? ? ? ? ? ?});
? ? ? ?});
? ? },
? ? async searchForTerm(term) {
? ? ? ?this.results = await this.handleWaiting(this.$wire.query(term), 500);
? ? ? ?// do something with the results...
? ? },
?}
非常簡(jiǎn)單。
舉報(bào)