setTimeout尽管clearTimeout仍然会触发

我有以下功能。其意图是，当您将鼠标悬停在类别为.toolTip的项目上时，它会在3秒后从您悬停的元素中记录data-tooltip。但是，如果您的光标离开了该项目，它应该取消setTimeout并且不显示该消息。setTimeout尽管clearTimeout仍然会触发

“超时设置”和“超时已清除”消息按预期启动，但指定的函数仍会触发。我究竟做错了什么？

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

来源

2016-02-10 BFWebAdmin

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

你的变量toolTipMessage只活这是悬停执行的函数的执行环境中，通过鼠标悬停该元素的下一次，该变量将不再存在（或者，更准确地说，你有不同相同名称的变量）。

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

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

来源

2016-02-10 11:56:06 Jamiec

啊哈！谢谢，现在你已经说过了，这很有道理。 – BFWebAdmin

不同的执行上下文是我相信的术语。 –

@ jeffpc1993 - 是的，谢谢。更新。 – Jamiec

setTimeout尽管clearTimeout仍然会触发

回答

相关问题