我有一个Vue项目,在Vuex存储中有以下状态:
state: {
gameStartTimer: 5,
counter: false,
randomNumber: Number,
clickAlert: false
}
现在,在actions中,我有以下内容:
actions: {
async startCounter({ state }) {
state.counter = true;
state.clickAlert = false;
while (state.gameStartTimer > 0 && state.counter) {
// 这将定时器设置为从5倒数到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状态达到0
await new Promise(resolve => setTimeout(resolve, 1000));
if (state.clickAlert)
state.randomNumber--;
if (state.randomNumber == 0) {
state.clickAlert = true;
}
}
},
}
我面临的问题是,第一个定时器被包裹在一个while循环中,这正是我想要的,以便游戏从5开始倒数到0。
然后,我希望第二个定时器(使用randomNumber作为持续时间)在后台运行,然后将clickAlert状态设置为true。
然而,我无法在async/await方法中使第二个定时器运行。我不太确定语法或逻辑问题是什么。
任何提示都将不胜感激。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
明显的解决方案似乎是将第二个计时器也放在一个
while循环中。while (state.randomNumber > 0) { await new Promise(resolve => setTimeout(resolve, 1000)); state.randomNumber--; if (state.randomNumber === 0) { state.clickAlert = true; } }async/await只是一种避免回调函数的方法。它在功能上等同于以下代码:while (state.randomNumber > 0) { setTimeout(() => { state.randomNumber--; }, 1000); }