autoIntervalTest in $interval doesn't resume/restart properly

Hello 👋

First of all, thank you for the good work with these helpers.

I’m trying to build an image slider using $interval. I want it to start automatically on init and pause/resume on @mouseenter and @mouseleave.

Here is my code:

<div x-data="{ timer: 7000, autoIntervalTest: true, autoplaySlider: function() { document.getElementById('next_btn').click(); }}" x-init="$interval(autoplaySlider, { timer, forceInterval: true})" @mouseenter="autoIntervalTest = false" @mouseleave="autoIntervalTest = true">

When I enter the picture, the timer is correctly stopped and starts again when leaving.

The problem is that when you quickly enter and leave the slider, the function will run multiple times in a row without respecting the initial timer. It’s like leaving the picture fires the function every time and stacks these functions instead of resetting the initial one.

Another example with this

If you increase the timer value a little bit (2000 for example) and try clicking the counter multiple times in a row, the counter is now increasing much faster than the initial 2 seconds set by the timer.

Is there a way to resume/restart the same function instead of launching a new one with autoIntervalTest?

Hope my explanation is clear enough and thanks in advance for your help!

Regards,

Joachim

[Aktarus006]

OK, I’ve made a codepen with an example. https://codepen.io/aktarus006/full/KKaRxqW

So the slider is made with ta-gallery The expected behaviour is to autoplay the slider and change banner every 7 seconds. When mouseenter the banner, it pause the timer and it starts again when leaving it.

Try to move your mouse in and out from the banner a few times and then go away from it to see the issue.

@SimoTod if you have time during the weekend to look at it, it would be very helpful. Sadly, I don’t think I have enough knowledge to do it by myself.

[SimoTod]

Thanks, @Aktarus006 I’ve just tagged v1.2.1.