Question

I have a jQuery set interval loop that controls a slider. I would like to be able to stop it when a user clicks a slider button which would restart the time loop but all I know is how to stop the loop with

clearInterval(interval);

This is under 3 click functions that are outside of the loop beneath and I want to recall the setInterval time to restart in each click function after it is stopped.

How would I recall this setInterval to start again?

var interval = setInterval(timecode, 8000);
function timecode() {
$varadd = $varadd + 1;




if ($varadd == "1")
{
            $(".slider").css("left","-428px");
            $("#slidecont2").css('background-image', 'url(pictures/selected.png)');
            $("#slidecont1").css('background-image', 'url(pictures/unselected.png)');
            $("#slidecont3").css('background-image', 'url(pictures/unselected.png)');
}
else if ($varadd == "2")
{
            $(".slider").css("left","-856px");
            $("#slidecont3").css('background-image', 'url(pictures/selected.png)');
            $("#slidecont2").css('background-image', 'url(pictures/unselected.png)');
            $("#slidecont1").css('background-image', 'url(pictures/unselected.png)');
}
else if ($varadd == "3")
{
            $(".slider").css("left","0");
            $("#slidecont1").css('background-image', 'url(pictures/selected.png)');
            $("#slidecont2").css('background-image', 'url(pictures/unselected.png)');
            $("#slidecont3").css('background-image', 'url(pictures/unselected.png)');
$varadd = 0;
}
}

Answer 1

I literally just solved this problem from this persons post Reset setinterval on click

I used this to restart the setInterval which also includes a timeout function that adds time to the slide that the guest clicks on.

  setTimeout(function() {
    setInterval(timecode, 8000);
  }, 2000);

So inside of your 3 click functions you would have something like this. And I assume you will also have your $varadd changed?

$(".slider").css("left","0");
$("#slidecont1").css('background-image', 'url(pictures/selected.png)');
$("#slidecont2").css('background-image', 'url(pictures/unselected.png)');
$("#slidecont3").css('background-image', 'url(pictures/unselected.png)');
clearInterval(interval);
$varadd = INTEGER;
setTimeout(function() {
setInterval(timecode, 8000);
}, 2000);

You simply just rewrite the setInterval if you don’t want to add the setimeout function.