jQuery event handling with .live() problem with setInterval and clearInterval
- by Kyle Lafkoff
jQuery 1.4.2:
I have an image. When the mouseover event is triggered, a function is executed that runs a loop to load several images. On the contrary, the mouseout event needs to set the image back to a predetermined image and no longer have the loop executing. These are only for the images with class "thumb":
$("img.thumb").live("mouseover mouseout", function(event) {
var foo = $(this).attr('id');
var wait;
var i=0;
var image = document.getElementById(foo);
if (event.type == 'mouseover') {
function incrementimage()
{
i++;
image.src = 'http://example.com/images/file_'+i+'.jpg';
if(i==30) {i=0;}
}
wait = setInterval(incrementimage,500);
} else if (event.type == 'mouseout') {
clearInterval (wait);
image.src = 'http://example.com/images/default.jpg';
}
return false;
});
When I mouseout, the image is set to the default.jpg but the browser continues to loop though the images. It will never stop. Can someone hit me with some knowledge? Thanks.
