jQuery perform action if user not hovered div for 5 seconds

Question

I am trying to make an image slider. Now, I got the basic part of the slider - the only thing is that the slider automatically displays a new picture every 5 seconds (already built that) but as soon as the user hovers the slider-menu, the 5 second timer does not stop.

This is my slider code;

var index = $(this).parent("li").index();

        var item_y = $(this).parent("li").offset().top;
        var item_x = $(this).parent("li").offset().left;

        $("#slider li a").each(function(){
            $(this).removeClass("active");
            Cufon.refresh();
        });

        $(this).addClass("active");

        $("#slider_arrow").css({
            'top' : item_y,
            'left' : item_x-109
        });

        $("#slider_image li").hide().each(function(i,v){
            if (i == index) {
                $(this).fadeIn("medium");
            }
        });

        Cufon.refresh();

This is actually the - on hover - action. Below is the code for the action that happens every 5 seconds.

setInterval(function(){

        var current_index = $("#slider li a.active").parent("li").index();

        var new_index = $("#slider li").eq((current_index+1));

        if (new_index.length > 0)
        {
            new_index.children("a").mouseover();
        }
        else
        {
            $("#slider li:first-child").children("a").mouseover();
        }

    }, 5000);

So what I want is to reset the 5 second interval as soon as the user touches an item from the #slider li menu.

How can I achieve this?

Thanks

Answer 1

You'll have to store the interval handle so you can call clearInterval() when needed.

var myinterval = setInterval(
    ....
, 5000);

$('#slider li').mouseenter(function() {
    if(myinterval) clearInterval(myInterval);
};

Answer 2

Check out this answer for how to create a pause-able javascript timeout.

It should work well.