How can I clear setInterval when a specific button is pressed?

Question

I'm having a hard time coming up with a solution on how to clear setInterval when clicking on a specific button(with class "next"). My code is listed bellow, and I'm just starting to learn js and jquery so it's probably in a bad shape.

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        slides[slideIndex-1].style.display = "block";  
    }

    $(document).ready(function(){
         function playslider(){
              $('.next').trigger('click');
              var x = setTimeout(function(){playslider()}, 5000);
         }
         playslider();  <!--To loop-->
    });
</script>

Also if you wouldn't mind helping how can I make the first click to occur 5 seconds after the page is loaded.

Edit: To elaborate more, so you have bigger understanding of what I'm doing and with what I need help. I am creating a simple automatic picture Slideshow, that has a Next and Previous button. I want to cancel the setInterval(missused with setTimout), when pressing on either Next or Previous button. And I'm having a hard time figuring out where to put the code and how it should look like to clear setInterval time, while simultaneously going to the next picture.

Check out https://stackoverflow.com/questions/2901108/how-do-i-clear-this-setinterval and https://www.w3schools.com/jsref/met_win_clearinterval.asp — Wolfie, Aug 04 '17 at 14:30
Probably easier to just do `setInterval(playslider, 5000)` instead of setting a new timeout each time. — csander, Aug 04 '17 at 14:31
https://www.w3schools.com/jsref/met_win_clearinterval.asp use clearInterval(), checkout the link from w3schools for an example — hjm, Aug 04 '17 at 14:32
Possible duplicate of [How do I clear this setInterval](https://stackoverflow.com/questions/2901108/how-do-i-clear-this-setinterval) — Liam, Aug 04 '17 at 14:35
I would put money on the fact that this entire block of code is a work around for the [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) issue. If so, fix the actual issue here and don't use setTimeout at all — Liam, Aug 04 '17 at 14:37
`var timer = setTimeout(...` then `$(".next").data("timer", timer);` then `$(".cancel").click(function() { clearTimeout($(".next").data("timer")); });` (assuming you only have 1 next button). Seems strange to have a 'next' button that keeps going to next - should be "start". — freedomn-m, Aug 04 '17 at 14:50
@csander you would use `setTimeout` like this if you wanted to optionally continue (as opposed to explicitly cancel interval) or if it was possible the interval was shorter than the time to do the work (eg loading an external resource). In this case though... — freedomn-m, Aug 04 '17 at 14:52

score 3 · Answer 1 · answered Aug 04 '17 at 14:34

3

You mix jQuery and DOM in an unhealthy manner var slides = $(".mySlides");
You are looking for clearInterval if you use setInterval and clearTimeout if you use setTimeout

To delay execution use the page load:

var tId ;
function playslider(){
  $('.next').trigger('click');
}
$(function() {
 tId = setInterval(playslider,5000); // can be stopped with clearInterval(tId);
});

answered Aug 04 '17 at 14:34

mplungjan

169,008
28
173
236

Something like this is what I was looking for, but could you perhaps tell me where in the code would I need to insert the code to clearInterval. – V. Križnar Aug 04 '17 at 15:07

rzelek · Answer 2 · 2017-08-04T14:47:47.043

You are actually using setTimeout, not setInterval.

You can cancel timeout using clearTimeout(id)

You can also use setInterval instead:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    slides[slideIndex-1].style.display = "block";  
}

$(document).ready(function(){
     var intervalId = null;
     function enablePlayback(){
          if(intervalId == null) {
            setInterval(function() {
              $('.next').trigger('click'); // you should implement this differently, as this is bad practice.
            }, 5000);
          }
     }
     function disablePlayback() {
          if(intervalId != null) {
            clearInterval(intervalId);
            intervalId = null;
          }
     }
     enablePlayback();  <!--To loop-->
     $('#ButtonToDisable').click(function() { disablePlayback(); });
     $('#ButtonToEnable').click(function() { enablePlayback(); });
});

This is the correct way, although I'd elaborate more that you can set the id in the setInterval (or setTimeout, but looks like he wants Interval as he's not using setTimeout right) function. Maybe provide example. — jdmdevdotnet, Aug 04 '17 at 14:39

How can I clear setInterval when a specific button is pressed?

2 Answers2