Javascript mootools 延迟隐藏/显示多级菜单

Question

我用 css 和 javascript 制作了一个 javascript 菜单。我使用了一些 mootools(1.11，我唯一可以使用的版本)。

该脚本在 domready 上运行，它获取一个 dom 元素，并在 mouseenter 和 mouseleave 事件上添加函数(showmenu、hidemenu)。 dom 元素是三层嵌套的 ul/li。

现在我想在菜单上添加 500 毫秒的延迟，当用户第一次将鼠标悬停在菜单上时，以及当用户离开菜单时再次(以便用户有半秒的时间返回到菜单)。

我不知道如何跟踪事件并取消它们。我对 javascript 的了解还不够好，不知道从哪里开始。谁能给我一个例子，我应该如何创建这个？不是真的在寻找剪切和粘贴代码，更多关于 javascript 工作的指针，我可以使用哪些 native 函数，以及设置类似内容的最佳方法是什么。

提前致谢

附注也许我还想在用户已经在使用菜单显示项目时延迟(100 毫秒左右)。这会复杂得多吗？

Answer 1

也许这可以给你一个想法:http://www.jsfiddle.net/dimitar/stthk/ (从我正在处理的另一个菜单类中提取它，并为您修改延迟作为示例)

基本上是几个有趣的部分:

options: {
    showDelay: 500,
    hideDelay: 500
},

定义鼠标悬停和移出的延迟。

然后通过 .delay() 延迟 mouseenter 的绑定(bind):

mouseenter: function() {
    $clear(_this.timer);
    _this.timer = (function() {
        this.retrieve("fold").setStyle("display", "block");
    }).delay(_this.options.showDelay, this);
},
mouseleave: function() {
    $clear(_this.timer);
    _this.timer = (function() {
        this.retrieve("fold").setStyle("display", "none");
    }).delay(_this.options.hideDelay, this);
}

_this.timer 是处理延迟函数的共享变量 - 它会在 mouseout 或 mouseover 时被清除。如果在规定的时间内没有发生重要事件，它会相应地改变显示，否则，它会取消该功能。

顺便说一下，这是针对 mootools 1.2.5(存储系统 + 元素委托(delegate))的，但对于重要的位来说，原则保持不变。