How can I setTimeout on a loop?

[herunan]

I currently have a card on my website which renders one object at a time as it loops through an array of objects. It currently responds to a click event but I'd like for it to automatically loop through the array based on time (e.g. using a setTimeout). Is this something that I can do using AlpineJS or do I need to do an external function call? If so, how?

It's a Rails-AlpineJS project. Feel free to criticise the code.

Thanks!

<div x-data="{ activeService: 0, services: services }">
  <template x-for="(service, index) in services" :key="index">
    <div :class="{'hidden': activeService !== index}" x-show.transition.duration.1000ms="activeService === index">
      <div class="flex items-center mx-auto max-w-xs" @click="activeService < (services.length - 1) ? activeService++ : activeService = 0">
        <img :src="service.icon" class="flex-shrink-0 h-12 w-12 mr-4">
        <h5 class="font-bold text-lg truncate" x-text="service.name"></h5>
      </div>
    </div>
  </template>
</div>

<%= javascript_tag do %>
  const services = <%= @services.to_json(only: [:slug, :name, :icon]).html_safe %>
<% end %>

[SimoTod]

You can use x-init to start your setTimeout logic<div x-data="{ activeService: 0, services: services }" x-init="setInterval(() => {activeService < (services.length - 1) ? activeService++ : activeService = 0}, 3000)">.

[herunan]

Fantastic. Thanks! Unrelated, but any clue why I'm not getting any out transition between items?

[SimoTod]

I'm not sure, I'll check tomorrow when on my laptop.