在指定的时间间隔内切换两次

Question

我一直在构建一个间隔定时器，我有点卡住试图在activeTime和restTime之间切换并循环指定的interval计数。

基本上我希望计时器运行3个间隔，其中活动时间是5秒，休息时间是2秒。

我已经设法让计时器倒计时，但我正在努力弄清楚如何在设置间隔量的两次之间切换。

这是我到目前为止：

InvervalTimer.vue

<template lang="">
  <div class="interval-timer">
    <div class="countdown">
      {{ time }}
    </div>
    <div class="countdown-controls">
      <button v-if="!isRunning" @click="startTimer()">start</button>
      <button v-if="isRunning" @click="stopTimer()">Reset</button>
    </div>
    <div class="interval-details">
      <div class="active-period">Active: {{ timer.active.time }}</div>
      <div class="rest-period">Rest: {{ timer.rest.time }}</div>
      <div class="intervals">Intervals: {{ timer.intervals }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'IntervalTimer',

  data: () => ({
    count: 0,
    isRunning: false,
    interval: 0
  }),
  props: ['timer'], // See Timer Object JSON bellow
  computed: {
    active() {
      return this.timer.active
    },
    rest() {
      return this.timer.rest
    },
    // Rest
    restTime() {
      const timeLeft = this.rest.totalSeconds - this.count

      if (this.rest.totalSeconds === this.count) {
        clearInterval(this.interval)
        this.count = 0
      } else {
        const mins = Math.floor(timeLeft / 60)
        const secs = timeLeft % 60
        if (mins > 10) {
          const mins = parseInt('0' + mins)
        }
        return mins + ':' + secs
      }
    },
    // Active
    activeTime() {
      const timeLeft = this.active.totalSeconds - this.count

      if (this.active.totalSeconds === this.count) {
        clearInterval(this.interval)
        this.count = 0
      } else {
        const mins = Math.floor(timeLeft / 60)
        const secs = timeLeft % 60
        if (mins > 10) {
          const mins = parseInt('0' + mins)
        }
        return mins + ':' + secs
      }
    },

    time() {
      const activeTime = this.activeTime
      const restTime = this.restTime
      if (activeTime <= 0) {
        this.stopTimer()
        return restTime
      } else {
        return activeTime
      }
    }
  },
  methods: {
    counting() {
      return this.count++
    },
    startTimer() {
      if (!this.interval) {
        this.isRunning = true
        this.interval = setInterval(this.timeIt, 1000)
      } else {
        this.isRunning = false
        clearInterval(this.interval)
        this.interval = 0
      }
    },
    timeIt() {
      this.count++
    },
    stopTimer() {
      this.isRunning = false
      clearInterval(this.interval)
      this.interval = 0
      this.count = 0
    }
  }
}
</script>

Timer对象传递给Props

{
  "active": {
    "minutes": 0,
    "seconds": "5",
    "time": "0:5",
    "totalSeconds": 5
  },
  "createdAt": {
    "seconds": 1549034224,
    "nanoseconds": 540000000
  },
  "intervals": "3",
  "rest": {
    "minutes": 0,
    "seconds": "2",
    "time": "0:2",
    "totalSeconds": 2
  }
}

Answer 1

在我看来，你没有非常清楚地模拟你的问题。你应该有一个跟踪剩余间隔，活动秒 - 这个间隔和休息秒 - 这个间隔的结构。每秒，如果它> 0则递减活动，否则如果> 0则递减休息，否则如果间隔> 0，则递减间隔并重置活动和休息。