how to stop setinterval when click

Question

I'm using a slideshow on my website, the plugin doesn't have an autoplay option so I'm using setinterval to achieve it.

here is my Code :

var myInterval,
    startInt = function(){

        myInterval = setInterval(function(){

            $(".slidenav__item--next").click();

        }, 7000);

    };

startInt();

I have a video overlay that open when clicking on an element, what I'm trying to do is to stop my autoplay function when the overlay is opened, and start again when closing the overlay.

here is what I've tried sofar but it's not working :

".slides a" is the link to open my overlay, ".back" is the link to close it.

var myInterval,
    startInt = function(){

        myInterval = setInterval(function(){

            $(".slidenav__item--next").click();

        }, 7000);

    };

startInt();

/* RESET WHEN OVERLAY OPENED */

$(".slides a").click(function() {

    clearInterval(myInterval);

});

$(".back").click(function() {

    startInt();

});

Any help higly appreciated !

thanks

The variable definition is in a reachable scope for the other functions? — muecas, Jun 24 '18 at 16:16
Please share the relevant HTML as well. You can use Stack Snippets (icon like `<>`) to get the HTML and JavaScript (and CSS) working together to illustrate the problem. As it is, it's hard to tell where the code is going wrong. — Heretic Monkey, Jun 24 '18 at 16:17
Add a console.log in each event handler to check if they are both getting called at the same time. I imagine the ".slides a" selector might match the back button as well. — Nikolay Dyankov, Jun 24 '18 at 16:21
Possible duplicate of [Javascript - Pausing setInterval()](https://stackoverflow.com/questions/21277900/javascript-pausing-setinterval) — Vignesh Raja, Jun 24 '18 at 16:49

score 0 · Answer 1 · answered Jun 24 '18 at 18:30

I found the solution by using a flag :

var paused = false;
var autoplay = window.setInterval(function() {

    if(!paused) {

        $(".slidenav__item--next").click();

    }

}, 7000);

$('.slides a').on('click', function(e) {

    e.preventDefault();
    paused = true;

});

$(".back").click(function() {

    e.preventDefault();
    paused = false;

});

how to stop setinterval when click

1 Answers1