IntervalFn

Wrapper for setInterval with controls.

Usage

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

    let count = 0

    const {active, resume, pause} = intervalFn(() => {
        count++
    }, 1)

</script>
<h1>Counter: {count}</h1>

<h3>IS ACTIVE: {$active ? "YES" : "NO"}</h3>
<button on:click={resume}>Resume</button>

<button on:click={pause}>Pause</button>
<script>
    import {intervalFn} from "@sveu/shared"

    let count = 0

    const {active, resume, pause} = intervalFn(() => {
        count++
    }, 1)

</script>
<h1>Counter: {count}</h1>

<h3>IS ACTIVE: {$active ? "YES" : "NO"}</h3>
<button on:click={resume}>Resume</button>

<button on:click={pause}>Pause</button>
svelte

Example

Hello

<script lang="ts">
    import { intervalFn } from "@sveu/shared"
    import { random } from "@sveu/shared/math"

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

    let word = "Hello"

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

<h1>{word}</h1>

{#if $active}
    <button on:click="{() => pause()}">Pause</button>
{:else}
    <button on:click="{() => resume()}">Resume</button>
{/if}
<script lang="ts">
    import { intervalFn } from "@sveu/shared"
    import { random } from "@sveu/shared/math"

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

    let word = "Hello"

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

<h1>{word}</h1>

{#if $active}
    <button on:click="{() => pause()}">Pause</button>
{:else}
    <button on:click="{() => resume()}">Resume</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 Function to execute Function Yes
interval Time to wait before executing fn in second number No


Options

Name Description Type Default
immediate Whether to execute fn immediately or not boolean true
immediateCallback Whether to execute fn onces this function is called boolean false


Returns

Name Description Type
active Whether the interval is active or not Readable<boolean>
resume Resume the interval Function
pause Pause the interval Function
Last update at: Invalid Date