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

Answer 1

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;

});