可以在事件處理程序上使用延遲對象鏈嗎？

Question

我對Javascript/jQuery（但不是編程）有點新，所以請原諒對此事的任何無知。我已經看過this question和this one，但都沒有解決我的問題。

我的場景：我有用Javascript/jQuery寫的幻燈片。在這張幻燈片中，當用戶將鼠標懸停在幻燈片上並在鼠標離開幻燈片區域時隱藏它們時，我想顯示控件（播放按鈕，向後，向前）。按鈕顯示和隱藏按預期方式顯示，但當我將鼠標懸停在其中一個按鈕（也在幻燈片上）時，它會消失（我知道這是因爲幻燈片上有「mouseleave」）。

我試着將懸停事件處理程序添加到我的按鈕來更改全局布爾值，以便只有當布爾值爲false（意味着其中一個按鈕的「mouseenter」未被觸發）時，纔會隱藏幻燈片控件。然後我在「mouseleave」之前註冊了「mouseenter」事件，但沒有奏效。

這裏的問題：儘管「的mouseenter」事件按鈕的「鼠標離開」事件的幻燈片之前被解僱，事件處理程序回調在相反順序執行。我不完全確定爲什麼會發生這種情況，但我知道它與JavaScript中如何處理懸停事件有關。

我讀了一些關於延遲對象，我想知道這是否是正確的方式去做這件事？

語法不正確，但我想沿着線的東西：

function isMouseOverButton() { 
    if(mouseEnteredButtonEvent()) { 
     window.isOverButton = true; 
    } else { 
     window.isOverButton = false; 
} 

function hideControls() { 
    if(!window.isOverButton) { 
     //hide buttons 
    } 
} 

$.when($("#slide").mouseleave()).then(isMouseOverButton()).then(hideControls()); 

反正是有事件處理程序和延遲對象合併這樣嗎？或者，有沒有比延期對象更好的方法？

在此先感謝！

編輯：我剛剛遇到this，但我不希望使用插件來實現這一點。

Answer 1

不，不是這樣做的方式！

當鼠標進入幻燈片，您顯示控件，當鼠標離開幻燈片，你隱藏控件，除了如果鼠標進入控件。

爲此，您將使用一個小超時並檢查鼠標在隱藏之前是否進入控件。

var timer; 

$('#slide').on({ 
    mouseenter: function() { 
     clearTimeout(timer); 
     $('.controls').show(); 
    }, 
    mouseleave: function() { 
     timer = setTimeout(function() { //don't hide them right away 
      $('.controls').hide(); 
     }, 400); // set a timeout 
    } 
}); 

$('.controls').on({ 
    mouseenter: function() { 
     clearTimeout(timer); // if the mouse entered the controls, 
    },      // clear the timeout, keeping the controls visible, 
    mouseleave: function() { 
     timer = setTimeout(function() { 
      $('.controls').hide(); 
     }, 400); 
    } 
}); 

FIDDLE

一個更容易的方式做同樣的事情，將放置控件的HTML #slide元素內，這樣，他們就不會觸發MouseLeave事件，但是這不是總是可能的，或方便的。