CODEWITHSUNDEEP
javascriptjquery
user3099199
user3099199

Reputation: 49

Pause setInterval on hover via jQuery

setInterval(function(){ $("#nav #nextslide").click()},10000);

It works. But I have a tag:

<a href="site.html" class="gallery form_click">click.</a>

I want, when mouseover on gallery button, pause timer. When mouseout, setInterval active again.

Tried this but not working:

$('a.gallery').hover(function(ev){
    clearInterval(timer);
}, function(ev){
    setInterval(function(){ $("#nav #nextslide").click()},10000);
});

How can I fix it?

Upvotes: 1

Views: 3485

Answers (2)

techie20
techie20

Reputation: 508

step 1:

function example(){  $("#nav #nextslide").click() //code you want ot execute inside setInterval() }

step 2:

var timer= setInterval(example(); ,10000);

step 3:

$('a.gallery').hover(function(ev){
    clearInterval(timer);
}, function(ev){
    timer=setInterval(example(); ,10000);
});

I've tested it, working fine.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to store the timer reference into a variable to clear it later

//declare it in a shared scope
var timer;

function startTimer() {
    timer = setInterval(function () {
        $("#nav #nextslide").click()
    }, 10000);
}

$('a.gallery').hover(function (ev) {
    clearInterval(timer);
}, function (ev) {
    startTimer();
});
startTimer();

Upvotes: 6

Related Questions