Question

I have a mouseover / mouseout handler. Both use Javascript timeout to delay their job. But mouseout event triggers even when mouse is still over the selector. It works normally when timeout is turned off in mouseout script. So I suppose I do something wrong about timeout. It is something like

      $('.selector').live( {mouseover : function() {
          var timeout = setTimeout(function() {
        $('.something' ).show();
          }, 1000);
    }, mouseout: function () {
          timeout = setTimeout(function() {
        $('.something' ).hide();    
          }, 2000);
    }
      });

Same thing happens if I use hover handler instead of mouseover / mouseout. And same thing if I use different variable names for two timeouts, or if I clear one timeout before calling another. What do I do wrong?

Answer 1

Since it works normally without timeouts I assume mouseover/mouseout is the correct event for you instead of mouseenter/mouseleave.

You are calling multiple timeouts constantly which are firing all over the place, you need to use a single timer that is only timing a single thing at one time:

(function () {
var timeout = 0;
    $('.selector').live({
    mouseover: function () {
    window.clearTimeout( timeout );
        timeout = setTimeout(function () {
        $('.something').show();
        }, 1000);
    },
    mouseout: function () {
    window.clearTimeout( timeout );
        timeout = setTimeout(function () {
        $('.something').hide();
        }, 2000);
    }
    });
})()

window.setTimeout just returns an ordinary integer number. Each time you call window.setTimeout a new timer will be created regardless of what variable the return value is assigned to. The return value of window.setTimeout can be used to clear a specific timer.

As a side effect, you can clear timeouts that you don’t even know are existing. For example:

jQuery("div").fadeOut( 15000 );

var l = 10000;

while( l-- ) window.clearTimeout( l );

You are brute forcing 10000 different timer ids and clearing them all, taking out the jQuery fx internal timer which stops the fading out. Do not use in real code, for demonstration purposes only.