Use the $interval()
Magic Helper instead: https://github.com/alpine-collective/alpine-magic-helpers
A lightweight interval plugin for Alpine.js that lets you call a function every n milliseconds
Useful when you need to change state every n seconds, such as in a slideshow, or even to check on some external data.
Note: By default, the timer will pause when the browser tab is idle
<!-- Counter example -->
<div
x-data="{ count: 0, add() { this.count++ } }"
x-alpine-interval="add"
x-text="count">
</div>
The timer defaults to 1000ms but you can pass in parameters to override
<!-- Counter example with timer adjusted -->
<div
x-data="{ count: 0, add() { this.count++ } }"
x-alpine-interval="{ callback: 'add', timer: 3000 }"
x-text="count">
</div>
The delay defaults to the timer but you can pass in parameters to override.
<!-- Counter example with delay adjusted -->
<div
x-data="{ count: 0, add() { this.count++ } }"
x-alpine-interval="{ callback: 'add', delay: 3000 }"
x-text="count">
</div>
Include the following <script>
tag in the <head>
of your document (before Alpine):
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/alpine-auto-interval@0.x.x/dist/index.js"></script>
If you wish to create your own bundle:
npm install kevinbatdorf/alpine-auto-interval --save
Then add the following to your script:
import 'alpine-auto-interval'
import 'alpinejs'
Copyright (c) 2020 Kevin Batdorf
Licensed under the MIT license, see LICENSE.md for details.