Restarting setInterval after using clearInterval in Javascript

Question

I am trying to make it so that there are two buttons using Javascript, one to stop the image carousel using clearInterval which works well, however, I also want another button to restart the carousel however I can't figure out how to do so.

<img src="images/img1.jpg" id="images" width="200px"> <button type="button" id="stop">Stop the Carousel</button> <button type="button" id="start">Start the Carousel</button> <script> document.getElementById('stop').addEventListener('click', stopit); var start = 1; var timer = setInterval(carousel, 2000); function carousel(){ var image_data; start = start % 5; image_data = "images/img" + (start+1) + ".jpg"; document.getElementById('images').src=""+ image_data; start++; } function stopit(){ clearInterval(timer); } </script>

Just put your current code into a click handler of a start button. — Teemu
– Teemu, Commented May 23, 2019 at 9:16

Will Jenkins · Accepted Answer · 2019-05-23 09:26:44Z

Move your timer start logic to its own function:

<img src="images/img1.jpg" id="images" width="200px"> <button type="button" id="stop">Stop the Carousel</button> <button type="button" id="start">Start the Carousel</button> <script> document.getElementById('stop').addEventListener('click', stopit); document.getElementById('start').addEventListener('click', startIt); var start = 1; var timer function carousel(){ var image_data; start = start % 5; image_data = "images/img" + (start+1) + ".jpg"; document.getElementById('images').src=""+ image_data; start++; } function startIt(){ if(timer) stopit() timer = setInterval(carousel, 2000); } function stopit(){ clearInterval(timer); } startIt() //if you want it to start automatically </script>

"...another button to restart the carousel" - It seems carousel should start by default on page load.

Sanat Gupta · Accepted Answer · 2019-05-23 09:36:11Z

Please use this code there start, stop and restart button as well I hope it's useful.

if you click restart button then first carousel image comes it means it's work beginning.

Thanks

<img src="images/img1.jpg" id="images" width="200px"> <button type="button" id="stop">Stop the Carousel</button> <button type="button" id="start">Start the Carousel</button> <button type="button" id="restart">Restart the Carousel</button> <script> document.getElementById('stop').addEventListener('click', stopit); document.getElementById('restart').addEventListener('click', restart); document.getElementById('start').addEventListener('click', start); var start = 1; var timer = setInterval(carousel, 2000); function carousel(){ var image_data; start = start % 5; image_data = "images/img" + (start+1) + ".jpg"; document.getElementById('images').src=""+ image_data; start++; } function stopit(){ clearInterval(timer); } function start(){ timer = setInterval(carousel, 2000); } function restart(){ start = 1; timer = setInterval(carousel, 2000); } </script>

Collectives™ on Stack Overflow

Restarting setInterval after using clearInterval in Javascript

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related