1

我正在尝试在悬停时显示帮助提示之前设置延迟。但是，我面临的问题是，一旦用户的鼠标触摸 HTML 元素并快速移动，它仍然会在 500ms 结束后显示帮助提示。我只想在鼠标悬停 500 毫秒时显示悬停提示。如果它在 500 毫秒之前离开该区域，那么它不应该显示悬停提示。你能帮忙吗？这是代码片段。请不要说我知道现有的插件，如 hoverIntent 等，但由于我在我的功能中做了很多自定义的事情，我不想避免使用插件并简单地调整我的自制解决方案。提前感谢您的建议。

这是代码片段

function displayTip(displayText, displayElement)
{
 // some sanity check code here
 setTimeout(function() {introduceDelay(displayText, displayElement) } ,500);    
}

我想要实现的是，如果用户的鼠标没有悬停在给定的 html 元素上 500 毫秒，那么根本不会调用引入延迟。

4

2 回答 2

3

保存返回值setTimeout()，然后在“mouseleave”处理程序中，用clearTimeout.

var timer;
function displayTip(displayText, displayElement)
{
 // some sanity check code here
 timer = setTimeout(function() {introduceDelay(displayText, displayElement) } ,500);    
}   

// ...

$('whatever').mouseleave(function() {
  clearTimeout(timer);
});

你真的不必担心检查它已经多久了。如果您clearTimeout()使用已触发的计时器 ID 调用，则不会发生任何不好的事情。

于 2012-07-09T22:10:55.587 回答
2 
var timer;

$("element").mouseenter(function(){
    timer = setTimeout(function(){
        //show help box
    }, 500);
});

$("element").mouseleave(funciton(){
    clearTimeout(timer);
});
于 2012-07-09T22:12:42.397 回答