如何在Vuex中启动第二个计时器,当第一个计时器过期?
P粉242535777
P粉242535777 2024-03-30 14:06:31
0
1
358

我有一个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方法中使第二个定时器运行。我不太确定语法或逻辑问题是什么。

任何提示都将不胜感激。

P粉242535777
P粉242535777

全部回复(1)
P粉333395496

明显的解决方案似乎是将第二个计时器也放在一个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);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板