Question

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

      $('.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/

Mouseout事件在鼠标实际运行之前触发

2 个答案: