setTimeout 触发太快答案

【问题标题】：setTimeout triggering too quicklysetTimeout 触发太快
【发布时间】：2013-10-23 17:31:04
【问题描述】：

我有一个在另一个元素的鼠标悬停事件上出现的工具提示（它只是一个 div）。我试图在主元素的 mouseleave 事件上隐藏工具提示，但是，如果鼠标悬停在工具提示上，我希望工具提示保持可见。

工具提示位于其元素的正下方。

我的代码如下：

var option_hide_timeout;

$(".option").mouseover(function () {
    showTooltip($(this));
});
$(".option").mouseleave(function () {
    option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip
});
$("#option_tt").mouseenter(function () {
    clearTimeout(option_hide_timeout);
});
$("#option_tt").mouseleave(function () {
    hideTooltip();
});

function showTooltip(parent) {
    var parentPos = parent.position();
    $("#option_tt").css({
        visibility: "visible",
        left: parentPos.left,
        top: parentPos.top + $(parent).height()
    });
}
function hideTooltip() {
    $("#option_tt").css("visibility", "hidden");
}

问题是工具提示在鼠标离开主元素后立即隐藏。该问题在 Chrome、Firefox、Opera 和 IE 中持续存在。

无论延迟的值是多少（我的代码中的 2000 只是一个示例，实际上它更可能更短），它会立即触发。

我尝试过使用 mouseover/mouseout 和 mouseenter/mouseleave - 两者都产生相同的结果，这让我得出以下结论：

setTimeout(hideTooltip(), 2000);

不正确。

在 mouseleave 事件中放置警报可确保我正在调用代码。

我是否遗漏了一些明显的东西？如果是这样，将非常感谢指向正确方向的指针。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

改变

option_hide_timeout = setTimeout(hideTooltip(), 2000);

到

option_hide_timeout = setTimeout(hideTooltip, 2000);

添加的括号使函数被立即调用，而不是被赋予setTimeout。

【讨论】：

谢谢。这也有效，并且比我发布的后续内容更优雅。

【解决方案2】：

我似乎已经解决了我自己的问题。

$(".option").mouseleave(function () {
    option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip
});

应该是：

$(".option").mouseleave(function () {
    option_hide_timeout = setTimeout(function () { hideTooltip() }, 2000);
});

这很简单，我应该在发帖之前就意识到这一点。

【讨论】：