我有一個Vue項目,在Vuex儲存中有以下狀態(tài):
state: { gameStartTimer: 5, counter: false, randomNumber: Number, clickAlert: false }
現(xiàn)在,在actions
中,我有以下內(nèi)容:
actions: { async startCounter({ state }) { state.counter = true; state.clickAlert = false; while (state.gameStartTimer > 0 && state.counter) { // 這將定時器設(shè)置為從5倒數(shù)到0 await new Promise(resolve => setTimeout(resolve, 1000)); if (state.counter) state.gameStartTimer--; // if語句確保在gameStartTimer達到0時獲取nowTime if (state.gameStartTimer == 0) { let timeNow = new Date().getTime(); state.nowTime = timeNow; } } state.counter = false; // 我想在這里啟動第二個定時器,每秒倒計時一次,直到randomNumber狀態(tài)達到0 await new Promise(resolve => setTimeout(resolve, 1000)); if (state.clickAlert) state.randomNumber--; if (state.randomNumber == 0) { state.clickAlert = true; } } }, }
我面臨的問題是,第一個計時器被包裹在一個while循環(huán)中,這正是我想要的,以便遊戲從5開始倒數(shù)到0。
然後,我希望第二個定時器(使用randomNumber作為持續(xù)時間)在後臺運行,然後將clickAlert狀態(tài)設(shè)為true。
然而,我無法在async/await方法中使第二個定時器運行。我不太確定文法或邏輯問題是什麼。
任何提示都將不勝感激。
明顯的解決方案似乎是將第二個計時器也放在一個while
循環(huán)中。
while (state.randomNumber > 0) { await new Promise(resolve => setTimeout(resolve, 1000)); state.randomNumber--; if (state.randomNumber === 0) { state.clickAlert = true; } }
async/await
只是一種避免回呼函數(shù)的方法。它在功能上等同於以下程式碼:
while (state.randomNumber > 0) { setTimeout(() => { state.randomNumber--; }, 1000); }