javascript - setTimeout 触发太快

Question

我有一个工具提示(只是一个 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 事件中放置警报可以确保代码正在被调用。

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

Answer 1

改变

option_hide_timeout = setTimeout(hideTooltip(), 2000); 

至

option_hide_timeout = setTimeout(hideTooltip, 2000); 

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