Raf Fn

Call function on every requestAnimationFrame with controls.

Usage

<script>
    import { rafFn } from "@sveu/browser"

    let count = 0

    const { pause, resume } = rafFn(() => {
        count++
        console.log(count)
    })
</script>
<script>
    import { rafFn } from "@sveu/browser"

    let count = 0

    const { pause, resume } = rafFn(() => {
        count++
        console.log(count)
    })
</script>
svelte

Example

Count: 0

<script>
    import { rafFn } from "@sveu/browser"

    let count = 0

    const { pause, resume } = rafFn(() => {
        count++
    })
</script>

<div class="flex flex-col space-y-6 mx-9 mt-9 text-center">
    <h1>Count: {count}</h1>

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

    <button on:click="{resume}">Resume</button>
</div>
<script>
    import { rafFn } from "@sveu/browser"

    let count = 0

    const { pause, resume } = rafFn(() => {
        count++
    })
</script>

<div class="flex flex-col space-y-6 mx-9 mt-9 text-center">
    <h1>Count: {count}</h1>

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

    <button on:click="{resume}">Resume</button>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Click fold/expand code

API

Arguments

Name Description Type Required
fn Function to call on every requestAnimationFrame Fn Yes


Options

Name Description Type
immediate Start the requestAnimationFrame loop immediately on creation boolean


Returns

Name Description Type
pause Pause the requestAnimationFrame loop Fn
resume Resume the requestAnimationFrame loop Fn
active Readable store of the active state Readable<boolean>
Last update at: Invalid Date