@alpine-collective/toolkit-interval
v1.0.2
Published
A magic helper to run a function every n milliseconds in Alpine.Js.
Downloads
303
Readme
$interval
A magic helper to run a function every n milliseconds in Alpine.Js.
Usage
The helper will run a function every x milliseconds.
<div x-init="$interval(() => console.log('Hello World'), 1000)"></div>The first parameter of the helper is the function to run while the second parameter is the interval.
Advanced usage
It's possible to use a config object as a second parameter to specify additional options:
| Property | Description |
| --- | --- |
| timer | Timer in milliseconds. |
| delay | Delay the first run. N.B. The first run is also delayed by the timer time. |
| forceInterval | Ignore the browser animation request mechanism. Default is false |
⚠️ By default,
$intervalwill run your function everynthmillisecond when browser provides an animation frame (viarequestAnimationFrame). This means that the function will not run if the browser tab is not visible unless forceInterval is set totrue.
Pausing the timer
If the component defines a property called autoIntervalTest, the function will only be called when the said property is set to a truthy value.
Installation
This helper is part of alpine-collective/toolkit. If you have already installed the main library, you won't need to do anything else. If you desire to install the helper as a standalone packacage, follow the steps below.
CDN
Include the following <script> tag in the <head> of your document, before Alpine:
<script src="https://unpkg.com/@alpine-collective/[email protected]/dist/cdn.min.js" defer></script>or
<script src="https://cdn.jsdelivr.net/npm/@alpine-collective/[email protected]/dist/cdn.min.js" defer></script>NPM
If you would like to bundle the plugin yourself, install it via NPM:
npm install @alpine-collective/toolkit-interval --save-devYou can then register the plugin with Alpine:
import Alpine from 'alpinejs'
import Interval from '@alpine-collective/toolkit-interval'
Alpine.plugin(Interval)
Alpine.start()