javascript - 尽管 clearTimeout，setTimeout 仍然会触发

Question

我有以下功能。目的是，当您将鼠标悬停在具有 class 的项目上时.toolTip，它将data-tooltip在 3 秒后记录您悬停的元素。但是，如果您的光标离开该项目，它应该取消 setTimeout 并且不显示消息。

“超时设置”和“超时清除”消息按预期触发，但命名函数仍然触发。我究竟做错了什么？

$(document).on("hover",".toolTip", function() {
    var toolTip = $(this);
    var toolTipMessage
    var hoveringNow = toolTip.attr("data-hovering-now");
    if(typeof hoveringNow !== typeof undefined && hoveringNow !== false) {
        toolTip.removeAttr('data-hovering-now');
        clearTimeout(toolTipMessage);
        console.log('Timeout cleared');
    }
    else {
        toolTip.attr('data-hovering-now', true);
        toolTipMessage = setTimeout(showToolTip, 3000, toolTip.attr("data-tooltip"));
        console.log('Timeout set');
    }               
});

function showToolTip(message) {
    console.log(message);
}

Answer 1

您的变量toolTipMessage仅存在于悬停时执行的函数的执行上下文中，下次悬停该元素时，该变量不再存在（或者，更确切地说，您有一个不同的同名变量）。

要使变量在执行之间保持不变，您需要在封闭的执行上下文中定义该变量 - 例如在hover处理程序之外。

var toolTipMessage = null;
$(document).on("hover",".toolTip", function() {
   ....
});