TimeoutFn

Reactive async state.

Usage

<script>
    import {timeoutFn} from "@sveu/shared"

    const { ready, start } = timeoutFn(1, { controls: true })

    const { active, pause, resume } = timeoutFn(() => {
      /* ... */
    }, 2)
</script>
<script>
    import {timeoutFn} from "@sveu/shared"

    const { ready, start } = timeoutFn(1, { controls: true })

    const { active, pause, resume } = timeoutFn(() => {
      /* ... */
    }, 2)
</script>
svelte

Example

Hello

Running.....

<script>
    import { timeoutFn } from "@sveu/shared"
    import { random } from "@sveu/shared/math"

    const greetings = [
        "Hello",
        "Hi",
        "Yo!",
        "Hey",
        "Hola",
        "こんにちは",
        "Bonjour",
        "Salut!",
        "你好",
        "Привет",
        " مرحبا",
    ]

    let word = "Hello"

    const { active, resume, pause } = timeoutFn(() => {
        word = greetings[random(0, greetings.length - 1)]
    }, 1)
</script>

<h1>{word}</h1>

{#if $active}
    <h1>Running.....</h1>
    <button on:click="{pause}">Stop</button>
{:else}
    <button on:click="{resume}">Start</button>
{/if}
<script>
    import { timeoutFn } from "@sveu/shared"
    import { random } from "@sveu/shared/math"

    const greetings = [
        "Hello",
        "Hi",
        "Yo!",
        "Hey",
        "Hola",
        "こんにちは",
        "Bonjour",
        "Salut!",
        "你好",
        "Привет",
        " مرحبا",
    ]

    let word = "Hello"

    const { active, resume, pause } = timeoutFn(() => {
        word = greetings[random(0, greetings.length - 1)]
    }, 1)
</script>

<h1>{word}</h1>

{#if $active}
    <h1>Running.....</h1>
    <button on:click="{pause}">Stop</button>
{:else}
    <button on:click="{resume}">Start</button>
{/if}
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Click fold/expand code

API

Arguments

Name Description Type Required
fn The function to invoke after the timeout. Function Yes
interval The time to wait before invoking the function in second MaybeStore<number> No


Options

Name Description Type Default
immediate Whether to invoke the function immediately. boolean true
immediateCallback Whether to execute the callback immediately after calling this function. boolean false


Returns

Name Description Type
active A boolean value that indicates whether the timer is executing. Readable<boolean>
resume A function to start the timer. Function
pause A function to stop the timer. Function
Last update at: Invalid Date