JavaScript - Restart setTimeout timer in a recursive function

Question

I'm trying to make an automatic slideshow in css and js. I've got a function that infinitely loops through an array of images (in the slideshow) after a specified time.

function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    t = setTimeout("autoSlide()", time);
}

But I want to reset the timer time if I manually change the slide by pressing a button. I tried this but it didn't work:

function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    nextBtn.addEventListener('click',()=>{
        clearTimeout(t);
    })

    t = setTimeout("autoSlide()", time);
}

Any help would be much appreciated.

Thanks.

Are you sure it's the time you want to reset rather than the counter? Is time incrementing over time? — Andy
– Andy, Commented Jun 20, 2021 at 21:42

Best Partner · Accepted Answer · 2021-06-20 21:30:47Z

1

Please use setInterval instead of setTimeout. Like this:

function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
var t = setInterval(autoSlide, time)
nextBtn.addEventListener('click',()=>{
    clearInterval(t);
    t= setInterval(autoSlide, time)
})

edited Jun 20, 2021 at 21:30

answered Jun 20, 2021 at 21:29

Best Partner

3973 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raphael PICCOLO Over a year ago

this would stop the timer for ever. the goal is to restart the timer.

Kinglish · Accepted Answer · 2021-06-20 21:32:56Z

1

I don't see that you're defining the interval variable outside of the function scope so it might be getting lost. Also, shouldn't this be a setInterval vs setTimeout? You could use either, but if your goal is to infinitely repeat until some condition, setInterval is more appropriate

let interval = setInterval(autoSlide, time); // variable being initialized outside function scope
nextBtn.addEventListener('click',()=>{
  clearInterval(interval);
  interval = setInterval(autoSlide, time)
})
function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    // ... presumably other logic to progress your slideshow every 'time'
}

edited Jun 20, 2021 at 21:32

answered Jun 20, 2021 at 21:27

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Comments

Best Partner · Accepted Answer · 2021-06-20 21:36:21Z

1

One way to do it would be to recreate the timer when you click. Not only delete the timer, but also recreate it.

nextBtn.addEventListener('click',()=>{
    clearTimeout(t);
    t = setTimeout(autoSlide, time);
})

ps: it's always good to learn, but dont try too much to reinvent the wheel. use this for exemple : https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html responseive, auto, touch support, etc...

edited Jun 20, 2021 at 21:36

Best Partner

3973 silver badges14 bronze badges

answered Jun 20, 2021 at 21:28

Raphael PICCOLO

2,1881 gold badge16 silver badges20 bronze badges

Comments

Andy · Accepted Answer · 2021-06-20 21:59:35Z

0

If this is a carousel you want your timeout to be the same but to reset the counter when you click the button.

Here's a function that sets up your timer, and your button, and returns a closure (a function that retains the information in its preceding lexical environment after it's been returned) that controls the timeout.

function handler() {

  const time = 1000;
  let counter = 0;

  const button = document.addEventListener('click', () => counter = 0);

  return function loop() {

    // Your transform code goes here
    console.log(counter);
    counter++;
    setTimeout(loop, time);
  }

}

// autoSlide is the returned function
const autoSlide = handler();
autoSlide();

<button>Stop the sliding!</button>

edited Jun 20, 2021 at 21:59

answered Jun 20, 2021 at 21:54

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

JavaScript - Restart setTimeout timer in a recursive function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related