jquery 如果发生某些事情，则取消延迟（setTimeout）事件答案

【问题标题】：jquery Canceling a delayed (setTimeout) event if something happendjquery 如果发生某些事情，则取消延迟（setTimeout）事件
【发布时间】：2010-12-09 11:39:58
【问题描述】：

简单地说，当一个元素悬停在上面时，这段代码就会启动。当它悬停时，我添加一个类并显示元素，然后在 5 秒后，我反转一切：即我淡出我之前显示的内容并删除我之前添加的类。

$("#it").addClass('somestyle').show();
setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

我的代码是干净的还是 hacky？
如果 i 元素在这 5 个延迟秒内再次悬停，如何取消这些延迟操作（淡出和类移除）。如果它再次悬停，我不希望计划中的延迟行动真正发生。

【问题讨论】：

标签： jquery

【解决方案1】：

声明出函数

    var timer;

然后在函数内部：

$("#it").addClass('somestyle').show();
clearTimeout(timer);
timer=setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

使用此代码，您首先清除超时，然后再次设置它，因此在触发此功能时它将再次等待。

【讨论】：

【解决方案2】：

这篇文章介绍了许多关于在悬停时淡入淡出/动画的方法：

http://greg-j.com/2008/07/21/hover-fading-transition-with-jquery/

另请参阅示例以了解其外观：

http://greg-j.com/static-content/hover-fade-redux.html

还有一个类似的问题here，用这个解决方案：

$('.icon').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li.icon > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
    $(this).data('timeout', t);
});

【讨论】：

【解决方案3】：

你可以在悬停时设置一个标志，所以在悬停时

IsHovering = 1;

当悬停结束时，

IsHovering = 0;

然后只在你的超时时间内运行代码

 if(IsHovering==0)

【讨论】：