倒计时useCountDown

vant 3.2版的封装倒计时，学习代码，重新封装！

// interval: 间隔时间 ms
// time: 剩余时间 ms
import { ref, computed } from 'vue-demi'

interface IuseNow {
  interval?: number
  time: number
}
export type CurrentTime = {
  days: number;
  hours: number;
  total: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
}
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOUR = 60 * MINUTE
const DAY = 60 * HOUR
let isStop:Boolean = false

function parseTime(time: number): CurrentTime {
  const days = Math.floor(time / DAY);
  const hours = Math.floor((time % DAY) / HOUR);
  const minutes = Math.floor((time % HOUR) / MINUTE);
  const seconds = Math.floor((time % MINUTE) / SECOND);
  const milliseconds = Math.floor(time % SECOND);

  return {
    total: time,
    days,
    hours,
    minutes,
    seconds,
    milliseconds,
  };
}

let timerID: number | null = null
const useCountDown = (option: IuseNow = { interval: 1000, time:5000 }) => {
  let remain = ref(option.time)
  const current = computed(() => parseTime(remain.value))
  
  const start = () => {
    const endTime:number = isStop ? Date.now().valueOf() + remain.value : Date.now().valueOf() + option.time
    if (isStop) {
      isStop = false
    }
    if (!timerID) {
      timerID = window.setInterval(() => {
        if (isStop) return
        remain.value = endTime - Date.now().valueOf()
        if (remain.value <= 0) {
          reset()
        }
      }, option.interval)
    }
  }

  const pause = () => {
    if (timerID) {
      clearInterval(timerID)
      timerID = null
      isStop = true
    }
  }

  const reset = (totalTime:number = option.time) => {
    if (timerID) {
      clearInterval(timerID)
    }
    console.log('option', totalTime)
    remain.value = totalTime
    timerID = null
    isStop = true
  }

  return {
    current,
    start,
    reset,
    pause
  }
}

export default useCountDown

<template>
  <div>
    <span>
      {{ current.days }}:{{ current.hours}}:{{current.minutes}}:{{current.seconds}}:{{current.milliseconds}}
    </span>

    <br />
    <button @click="handleStart">start</button>
    <button @click="handleStop">stop</button>
    <button @click="handleReset">reset</button>
  </div>
</template>

<script>
import useCountDown from '../index'
export default {
  setup() {
    const countDown = useCountDown({
      time: 24 * 60 * 60 * 1000
    })

    return {
      current: countDown.current,
      countDown,
    }
  },
  methods: {
    handleStart() {
      this.countDown.start()
    },
    handleReset() {
      this.countDown.reset()
    },
    handleStop() {
      this.countDown.pause()
    }
  }
}
</script>

<style>

</style>