Increment value every 4 seconds

Question

Using HTML and AlpineJS I have the following:

<div 
  x-data='{ keys: ['a', 'b', 'c'], index: 0 }' 
  x-init="setTimeout(() => i = i < keys.length - 1 ? i + 1 : 0, 4000)">
</div>

I need the index to increment every 4 seconds and back to zero when reaches last one.

My code increments from 0 to 1 but it stops there.

How can I make this work?

`i = (i < keys.length - 1) ? i + 1 : 0` – Konrad Nov 29 '22 at 20:35 — Konrad, Nov 29 '22 at 20:35

score 1 · Accepted Answer · answered Nov 29 '22 at 20:40

1

You could use setInterval instead of setTimeout since setTimeout will run 1 time after 4 seconds pass after initialization. setInterval will run every 4 seconds and if you need to stop it you can use clearInterval once your needed condition is met.

answered Nov 29 '22 at 20:40

Alberto Jaime Le Baron

36
3

If this was useful please mark it as the accepted solution. – Alberto Jaime Le Baron Dec 05 '22 at 05:13

Increment value every 4 seconds

1 Answers1