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

Question

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

“Timeout set”和“Timeout cleared”消息按预期触发，但指定函数仍会触发。我做错了什么？

$(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() {
   ....
});