Skip to content

Latest commit

 

History

History
executable file
·
57 lines (45 loc) · 1.27 KB

useTimeout.md

File metadata and controls

executable file
·
57 lines (45 loc) · 1.27 KB

useTimeout

Vue function that returns isReady value as true after a specified ms amount of time.

Reference

function useTimeout(
    ms?: number,
    runOnMount?: boolean
): {
    isReady: Ref<boolean | null>;
    start: () => void;
    stop: () => void;
}

Parameters

  • ms: number how many milliseconds to wait before the timer is completed
  • runOnMount: boolean whether to run the timeout on mount, true by default

Returns

  • isReady: Ref<boolean | null> the timer status
    • false when the timer is executing
    • true when the timer is completed
    • null when the timer is idle
  • start: Function the function used for starting or resetting the timer
  • stop: Function the function used to stop the timer

Usage

<template>
  <div>
    <p>Timer status: {{ isReady ? 'Called!' : 'Pending...' }}</p>

    <button @click="start">Reset Timer</button>
    <button @click="stop">Stop Timer</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import { useTimeout } from 'vue-use-kit'

  export default Vue.extend({
    name: 'UseTimeoutDemo',
    setup() {
      const timerDuration = 3000
      const { isReady, start, stop } = useTimeout(timerDuration)
      return { isReady, start, stop }
    }
  })
</script>