jQuery: Stop and start "setInterval"

Question

I have a slideshow on my website but there is a problem with in.

Here, my JS:

var size_ini = 1;
$(document).ready(function() {
    setInterval('$("#next").click()',10000)
    $("#next").click(function() {
        if(size_ini < 3);
        size_ini++;
        else
        size_ini = 1
        $(".sample").hide();
        $("#id" + size_ini).show();
        $(".comment" + size_ini).show();
        $(".comment_description" + size_ini).show();
    });
    $("#prev").click(function() {
        if(size_ini > 1)
        size_ini--;
        else
        size_ini = 3;
        $(".sample").hide();
        $("#id" + size_ini).show();
        $(".comment" + size_ini).show();
        $(".comment_description" + size_ini).show();
    });
});

As you can see I have a Timer of 10 sec. for slide. I have a previous and a next button. So when i clicked on one of the button the timer should stop and starts again. I have tried "clearInterval" but this doesn't work.

Can anyone tell how this works.

Here is FIDDLE.

score 9 · Accepted Answer · answered Feb 15 '14 at 16:40

9

Fiddle Demo

var size_ini = 1;
$(document).ready(function () {
    var timer = setInterval('$("#next").click()', 10000); //assign timer to a variable
    $("#next").click(function () {
        if (size_ini < 3) size_ini++;
        else size_ini = 1
        $(".sample").hide();
        $("#id" + size_ini).show();
        clearInterval(timer); //clear interval
        timer = setInterval('$("#next").click()', 10000); //start it again
    });
    $("#prev").click(function () {
        if (size_ini > 1) size_ini--;
        else size_ini = 3;
        $(".sample").hide();
        $("#id" + size_ini).show();
        clearInterval(timer); //clear interval
        timer = setInterval('$("#next").click()', 10000); //start it again
    });
});

answered Feb 15 '14 at 16:40

Tushar Gupta - curioustushar

58,085
24
103
107

1

His edits now should work - he has correctly reassigned the interval to a variable. – Jay Blanchard Feb 15 '14 at 16:45
1

@DOCTYPEHTML in a hurry i forgot to re-assign `setInterval` to `timer ` – Tushar Gupta - curioustushar Feb 15 '14 at 16:48
thank you, that have saved me a lot of time because of this problem – Feb 15 '14 at 16:52
http://jsfiddle.net/dwayz/ here doesn't work this. In my script i used this doesn't work. – Feb 15 '14 at 17:01
@DOCTYPEHTML you are missing `var timer` just below DOM ready -->it should be `var timer = setInterval('$("#next").click()', 10000);` demo--> http://jsfiddle.net/cse_tushar/dwayz/1/ – Tushar Gupta - curioustushar Feb 15 '14 at 17:04

score 4 · Answer 2 · answered Feb 15 '14 at 16:41

If you're going to want to clear the interval you need to assign it to a variable, then you can clear it easily -

var myInterval = setInterval('$("#next").click()',10000);

Then clear like this -

clearInterval(myInterval);

Once the interval has been cleared make sure to reset it and assign it to a variable again if you want it to continue.

score 2 · Answer 3 · answered Feb 15 '14 at 16:44

2

<button id="start">Start</button>
<button id="stop">Stop</button>

var timer;
$("#start").click(function() {
    timer = setInterval(function(){$("#next").trigger("click");},"500");
});
$("#stop").click(function() {
    clearInterval(timer);
});

answered Feb 15 '14 at 16:44

user3309783

75
1

jQuery: Stop and start "setInterval"

3 Answers3