maz-ui/dist/composables/useTimer.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { ref } from "vue";
function useTimer({ timeout = 1e3, callback, remainingTimeUpdate = 200, callbackOffsetTime = 0 }) {
  const internalTimeout = ref(timeout), remainingTime = ref(timeout);
  let timerId;
  function start(timeout2) {
    typeof timeout2 == "number" && (remainingTime.value = timeout2), typeof timeout2 == "number" && (internalTimeout.value = timeout2), startInterval();
  }
  function startInterval() {
    timerId || (timerId = setInterval(() => {
      remainingTime.value -= remainingTimeUpdate, remainingTime.value <= 0 && (stop(), setTimeout(() => callback?.(), callbackOffsetTime));
    }, remainingTimeUpdate));
  }
  function pause() {
    timerId && (clearInterval(timerId), timerId = void 0);
  }
  function resume() {
    !timerId && remainingTime.value > 0 && startInterval();
  }
  function stop() {
    setTimeout(() => remainingTime.value = internalTimeout.value, callbackOffsetTime * 2), pause();
  }
  function reset() {
    remainingTime.value = internalTimeout.value;
  }
  return {
    remainingTime,
    start,
    pause,
    resume,
    stop,
    reset
  };
}
export {
  useTimer
};