可以在事件处理程序上使用延迟对象链吗？

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事件，但是这不是总是可能的，或方便的。