Mouseout事件在鼠标实际退出之前触发

Question

我有一个mouseover/mouseout处理程序。两者都使用Javascript超时来延迟它们的工作。但是当鼠标仍在选择器上时，mouseout事件也会触发。当在mouseout脚本中关闭超时时，它正常工作。我想我在timeout上做错了什么。就像

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

如果我使用悬停处理程序而不是mouseover/mouseout，也会发生同样的事情。如果我对两个超时使用不同的变量名，或者在调用另一个超时之前清除一个超时，也是一样的。我做错了什么?

Answer 1

由于它正常工作，没有超时，我认为mouseover/mouseout是正确的事件，而不是mouseenter/mouseleave。

当你不断调用多个超时时，你需要使用一个计时器，一次只计时一件事:

(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只是返回一个普通的整数。每次调用window.setTimeout时，无论将返回值赋给哪个变量，都会创建一个新的计时器。window.setTimeout返回值可用于清除指定定时器

作为一个副作用，您可以清除您甚至不知道存在的超时。例如:

jQuery("div").fadeOut( 15000 );
var l = 10000;
while( l-- ) window.clearTimeout( l );

你是蛮力强迫10000个不同的计时器id和清除他们所有，拿出jQuery fx内部计时器停止淡出。请勿在实际代码中使用，仅用于演示目的。

Answer 2

你应该清除超时，这样它们就不会重叠。

var timeout = null;
$('#foo').live({
    mouseover: function() {
        if(timeout !== null){ 
            clearTimeout(timeout); 
            timeout = null;
        }
        timeout = setTimeout(function() {
            $('#bar').show();
        }, 1000);
    },
    mouseout: function() {
        if(timeout !== null){ 
            clearTimeout(timeout); 
            timeout = null;
        }
        timeout = setTimeout(function() {
            $('#bar').hide();
        }, 2000);
    }
});

演示:http://jsfiddle.net/46mFc/1/