Mouseout事件在鼠標實際上熄滅之前觸發

我有一個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，則會發生同樣的事情。如果我爲兩個超時使用不同的變量名稱，或者在調用另一個超時之前清除了一個超時，那麼也是如此。我做錯了什麼？

來源

2011-11-07 cincplug

做工精細，其瀏覽器您使用？ – Alex

因爲它沒有超時正常工作，我認爲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內部定時器。請勿在實際代碼中使用，僅用於演示目的。

來源

2011-11-07 14:26:39 Esailija

是的，就是這樣。謝謝。 – cincplug

你不應該強制超時。 Jquery有一個'.stop（）'方法用於這個確切的目的，更多的控制和可靠性。 –

@iliacholy，那不是重點，而是爲了展示定時器是如何工作的。運行代碼並不等同於.stop（），它實際上會中斷jQuery，因爲jQuery並不期望定時器從外部被神奇地移除。 – Esailija

您應該清除超時，以避免重疊。

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); 
    } 
});

演示：在FF http://jsfiddle.net/46mFc/1/

來源

2011-11-07 14:29:43

Mouseout事件在鼠標實際上熄滅之前觸發

回答

相關問題