Bagaimana untuk memulakan pemasa kedua dalam Vuex apabila pemasa pertama tamat tempoh?

Question

Saya mempunyai projek Vue dengan status berikut dalam storan Vuex:

state: {
  gameStartTimer: 5,
  counter: false,
  randomNumber: Number,
  clickAlert: false
}

Kini, dalam actions, saya mempunyai yang berikut:

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;
        }
      }

    },
}

Masalah yang saya hadapi ialah pemasa pertama dibalut dengan gelung sementara, itulah yang saya mahukan, supaya permainan bermula pada 5 dan dikira hingga 0.

Kemudian saya mahu pemasa kedua (menggunakan randomNumber sebagai tempoh) berjalan di latar belakang dan kemudian menetapkan keadaan clickAlert kepada benar.

Namun, saya tidak boleh mendapatkan pemasa kedua untuk dijalankan dalam kaedah async/menunggu. Saya tidak pasti apakah isu sintaks atau logik.

Sebarang petua akan sangat dihargai.

Answer 1

Penyelesaian yang jelas nampaknya ialah meletakkan pemasa kedua dalam whilegelung juga.

while (state.randomNumber > 0) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    state.randomNumber--;

    if (state.randomNumber === 0) {
        state.clickAlert = true;
    }
}

async/await Hanya satu cara untuk mengelakkan fungsi panggil balik. Ia berfungsi bersamaan dengan kod berikut:

while (state.randomNumber > 0) {
    setTimeout(() => {
        state.randomNumber--;
    }, 1000);
}