设置超时仍然触发，尽管清除超时

setTimeout still fires despite clearTimeout

本文关键字：超时 清除 设置      更新时间：2023-09-26

我有以下函数。目的是当您将鼠标悬停在具有类 .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);
}

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

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

var toolTipMessage = null;
$(document).on("hover",".toolTip", function() {
   ....
});
相关文章：