jquery timeout function not working properly

Question

Hi,

I am using the setTimeout function to set display: block; and append to li, on mouseover. I just want to remove the block and make it none.

My function works fine but the problem is if the mouse crosses the li, it self the block getting visible. How can I avoid this?

my code is:

var thisLi;
var storedTimeoutID;

$("ul.redwood-user li,ul.user-list li").live("mouseover", function(){
    thisLi = $(this);

    var needShow = thisLi.children('a.copier-link');

    if($(needShow).is(':hidden')){
        storedTimeoutID = setTimeout(function(){
            $(thisLi).children('a.copier-link').appendTo(thisLi).show();
        },3000);
    }
    else {
        storedTimeoutID = setTimeout(function(){
            $(thisLi).siblings().children('a.copier-link').appendTo(thisLi).show();
        },3000);
    }   
});

$("ul.redwood-user li,ul.user-list li").live("mouseleave", function(){      
    clearTimeout(storedTimeoutID);

    //$('ul.redwood-user li').children('a.copier-link').hide();
    $('ul.user-list li').children('a.copier-link').hide();
});

Answer 1

Your code might start working if You solve the problem with storedTimeoutID variable.

try storing it in $(this).data('storedtime')

If the problem remains - it's Your logic. Try reading about throtting and debouncing and You'll understand how to fix such problems.