CODEWITHSUNDEEP
javascriptjquerysetintervalclearinterval
ersanyus
ersanyus

Reputation: 103

I couldn't stop setInterval in Jquery

Could you help me that, how can I stop this Interval when I mouseover #headline_image?

$("#headline li").live('mouseover', function() { 
var HL = $(this).attr("data-name"); 
$("#headline_image").html("<img src='" + HL  + "'>"); });

setInterval(function()
{ $('#headline li[data-id=' + count + ']').mouseover(); },4000); });

I tried as below in mouseover function; but it didnt work

clearInterval(function()  { $('#headline li').mouseover(); });

Upvotes: 0

Views: 178

Answers (2)

jfriend00
jfriend00

Reputation: 708056

You have to save the actual timerid from the setInterval() call and you pass that to clearInterval().

$("#headline li").live('mouseover', function() { 
    var HL = $(this).attr("data-name"); 
    $("#headline_image").html("<img src='" + HL  + "'>"); 
    clearInterval(timerId);
});

var timerId = setInterval(function() { 
    $('#headline li[data-id=' + count + ']').mouseover(); },4000); 
});

FYI, .live() has been deprecated since version 1.7 of jQuery and even removed from the latest versions of jQuery so you should be using .on() in the version 1.8 you are using.

If #headline is a static object (present initially and not recreated), then you could switch to .on() like this:

$("#headline").on('mouseover', "li", function() { 
    var HL = $(this).attr("data-name"); 
    $("#headline_image").html("<img src='" + HL  + "'>"); 
    clearInterval(timerId);
});

var timerId = setInterval(function() { 
    $('#headline li[data-id=' + count + ']').mouseover(); },4000); 
});

If #headline itself is dynamic, then change to:

$(static parent).on('mouseover', "#headline li", function() {

where you you replace static parent with a selector to the closest parent to #headline that is itself not dynamic.

For references on using .on() for dynamic elements see these references:

jQuery .on does not work but .live does

Does jQuery.on() work for elements that are added after the event handler is created?

Proper use of .on method in Jquery

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

you need to use the reference returned by setInterval to clear it

var interval = setInterval(function () {
    $('#headline li[data-id=' + count + ']').mouseover();
}, 4000);

then 

clearInterval(interval)

also make sure the declare the variable interval in a scope shared by both these pieces of code

Upvotes: 2

Related Questions