useInterval

Run a function on a recurring interval that lives only as long as the component does. The composable schedules the next tick with setTimeout and runs the callback inside requestAnimationFrame, so no work happens while the tab is in the background.

Demo

Preview

0

Ticks every 1000ms. The interval reads its delay reactively:

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { useInterval } from '@basmilius/common';

    const ticks = ref(0);
    const delay = ref(1000);

    useInterval(delay, () => {
        ticks.value++;
    });
</script>

<template>
    <div class="demo">
        <p class="count">{{ ticks }}</p>
        <p class="hint">Ticks every {{ delay }}ms. The interval reads its delay reactively:</p>

        <div class="actions">
            <button :class="{active: delay === 250}" @click="delay = 250">Fast · 250ms</button>
            <button :class="{active: delay === 1000}" @click="delay = 1000">Normal · 1s</button>
            <button :class="{active: delay === 2000}" @click="delay = 2000">Slow · 2s</button>
        </div>
    </div>
</template>

<style scoped>
    .demo {
        padding: 24px;
        border: 1px solid var(--vp-c-border);
        border-radius: 12px;
        background: var(--vp-c-bg-soft);
        text-align: center;
    }

    .count {
        margin: 0;
        font-family: var(--vp-font-family-mono);
        font-size: 48px;
        font-weight: 700;
        color: var(--vp-c-brand-1);
        line-height: 1;
    }

    .hint {
        margin: 12px 0 16px;
        color: var(--vp-c-text-2);
        font-size: 14px;
    }

    .actions {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .actions button {
        padding: 6px 14px;
        border: 1px solid var(--vp-c-border);
        border-radius: 8px;
        background: var(--vp-c-bg);
        font-size: 13px;
        color: var(--vp-c-text-1);
    }

    .actions button.active {
        border-color: var(--vp-c-brand-1);
        color: var(--vp-c-brand-1);
    }
</style>

Importing

import { useInterval } from '@basmilius/common';

Usage

<script setup lang="ts">
    import { ref } from 'vue';
    import { useInterval } from '@basmilius/common';

    const now = ref(Date.now());

    useInterval(1000, () => {
        now.value = Date.now();
    });
</script>

<template>
    <span>{{ new Date(now).toLocaleTimeString() }}</span>
</template>

The interval can be reactive — pass a Ref<number> to throttle or accelerate the cadence at runtime. The first invocation happens after the initial timeout, not immediately on mount.

Type signature

declare function useInterval(
    interval: Ref<number> | number,
    fn: Function
): void;

See also

• useDebounced
• useDebouncedRef