HelloWorld！

我正在编写一个记忆游戏，它可以显示你完成游戏所需的时间。我提供的代码只是我使用的功能的一个更基本的Vue模板，但它是一个非常相似的用例。我的问题在于每个函数的注解。基本上我遇到的问题与停止计时器和un-stoping它.

我需要什么？

• 在我的html上显示自您开始点击交互以来的格式化时间，这里由startChrono（）函数表示。
• 自动停止时间，如果你没有互动的一段时间或，如果游戏结束。
• 自动恢复时间，如果你再次互动。
• 在代码和DOM中完全重置时间。

<script setup>
import { ref } from 'vue';

const startTime = ref(0); // Initial TimeStamp
const endTime = ref(false); // Boolean to stop the Chrono
const elapsedTime = ref(0); // Chrono Time
const isGameActive = ref(false);

function startChrono() {
  /* 
  I want pauseChrono() to be used here IF the startChrono() function hasnt been called since "x" time  
  or IF the isGameActive boolean is set to false
  (auto pause if you're not clicking on the start button in other words) 
  In my mind I should use a Debounce but cant really figure how to do it properly...
  */
  isGameActive.value = true;
  startTime.value = new Date().getTime();
  endTime.value = false;
  updateChrono();
}

function pauseChrono() {
  /*
  Issue here is when you stop the pause it still uses the initial timestamp
  so the delta time is still counted instead of 
  adding the time elapsed before the pause to a new timestamp chrono time...
  */
  if (endTime.value === true) endTime.value = false;
  if (endTime.value === false) endTime.value = true;
  updateChrono();
}

function updateChrono() {
  const intervalId = setInterval(() => {
    const currentTime = new Date().getTime();
    elapsedTime.value = Math.floor((currentTime - startTime.value) / 1000);

    if (endTime.value == true) {
      clearInterval(intervalId);
    }
  }, 1000);
}

function formatTime(seconds) {
  if (seconds < 0 || seconds > 3600) {
    return;
  }
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  if (minutes === 0) {
    return `${remainingSeconds} s`;
  } else {
    return `${minutes} min ${remainingSeconds} s`;
  }
}

function resetChrono() {
  isGameActive.value = false;
  startTime.value = 0;
  endTime.value = true;
  elapsedTime.value = 0;
  updateChrono();
}
</script>

<template>
  <main>
    <h1>
      Time:<span>{{ formatTime(elapsedTime) }}</span>
    </h1>
    <button @click="startChrono()">Start</button>
    <button @click="pauseChrono()">Pause</button>
    <button @click="resetChrono()">Reset</button>
  </main>
</template>

<style scoped>
main {
  background-color: lightslategray;
  padding: 5rem;
}
button {
  font-weight: bold;
  font-size: 18px;
  padding: 0.2rem 1rem;
  margin-right: 1rem;
  margin-block: 1rem 0;
  cursor: pointer;
}
span {
  color: rgb(2, 255, 120);
  margin-left: 1rem;
}
</style>