vue-composable

# Timeout

The setTimeout (opens new window).

# Parameters

import { useTimeout } from "vue-composable";

useTimeout(fn, delay);
Parameters Type Required Default Description
fn Function true A function to be executed after the timer expires.
delay Number false 0 The time, in milliseconds (thousandths of a second), the timer should wait before the specified function is executed.

# State

The useTimeout function exposes the following reactive state:

import { useTimeout } from "vue-composable";

const { ready } = useTimeout(fn, delay);
State Type Description
ready Ref<Boolean | null> current timeout state:
 false - pending
 true - called
 null - canceled

# Methods

The useTimeout function exposes the following methods:

import { useTimeout } from "vue-composable";

const { cancel } = useTimeout(fn, delay);
Signature Description
cancel cancel the timeout

# Example

# Code

<template>
  <div>
    <p />
    <button @click="show">Show an alert box after two seconds</button>
    <p />
    <button @click="cancel">Cancel alert before it happens</button>
  </div>
</template>
<script>
import { useTimeout } from "vue-composable";
export default {
  setup() {
    let cancelTimeout;

    function show() {
      const { cancel } = useTimeout(() => {
        alert("useTimeout callback invoked");
      }, 2000);
      cancelTimeout = cancel;
    }

    function cancel() {
      cancelTimeout();
    }

    return {
      show,
      cancel,
    };
  },
};
</script>

← Validation →