尽管 clearTimeout，setTimeout 仍然会触发答案

【问题标题】：setTimeout still fires despite clearTimeout尽管 clearTimeout，setTimeout 仍然会触发
【发布时间】：2016-02-10 11:53:23
【问题描述】：

我有以下功能。目的是当您将鼠标悬停在具有 .toolTip 类的项目上时，它将在 3 秒后从您悬停的元素中记录 data-tooltip。但是，如果您的光标离开项目，它应该取消 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);
}

【问题讨论】：

将var toolTipMessage 放在hover 函数处理程序之外，否则你在每个事件上重新定义它。对于 hovering-now 数据属性保留状态的意义，我也有点困惑，为什么不只使用两个处理函数呢？一个用于 mouseenter，另一个用于 mouseleave？

标签： javascript jquery settimeout cleartimeout

【解决方案1】：

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

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

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

【讨论】：

啊哈！谢谢，既然你这么说了，那是完全有道理的。
不同的execution context 是我相信的术语。