Javascript 如何告诉.hover（）等待？

我有一个下拉菜单。现在，当它向下滑动到多个级别时，我希望它在消失之前增加2秒的等待时间，这样用户可以在错误地破坏

.hover（）

时重新进入

可能吗

我的幻灯片代码：

$('.icon').hover(function() {
        $('li.icon > ul').slideDown('fast');
    }, function() { 
        $('li.icon > ul').slideUp('fast');
    });

---

这将使第二个函数在执行前等待2秒（2000毫秒）：

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

它还可以在用户将鼠标悬停回时清除超时，以避免出现疯狂行为

---

然而，这不是一种非常优雅的方式。您可能应该查看插件，该插件旨在解决此特定问题。

一般的想法是使用

setTimeout

，如下所示：

$('.icon').hover(function() {
           $('li.icon > ul').slideDown('fast');
    }, function() { 
           setTimeout(function() {
                $('li.icon > ul').slideUp('fast');
           }, 2000);
    });

但是，如果用户鼠标移出，然后又快速地鼠标移入，这可能会产生违反直觉的效果。这并不意味着当用户再次将鼠标悬停在超时上时，会清除超时。这需要额外的状态。

我个人喜欢“hoverIntent”插件：

来自页面：hoverIntent是一个插件，它试图确定用户的意图。。。就像一个水晶球，只能用鼠标移动！它的工作原理与jQuery的内置悬停类似（并且源于jQuery的内置悬停）。但是，它不是立即调用onMouseOver函数，而是等到用户的鼠标速度足够慢时才进行调用

为什么?？延迟或防止意外触发动画或ajax调用。简单的超时适用于较小的区域，但如果目标区域较大，则它可能会执行而不考虑意图

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config ) 

配置选项

灵敏度： 如果鼠标在轮询间隔之间的移动少于此像素数，则将调用“over”函数。最小灵敏度阈值为1时，鼠标不得在轮询间隔之间移动。灵敏度阈值越高，您越有可能收到假阳性。默认敏感度：7

间隔： 读取/比较鼠标坐标之间等待的毫秒数。当用户的鼠标第一次输入元素时，将记录其坐标。调用“over”函数的最快时间是在单个轮询间隔之后。将轮询间隔设置得更高会增加第一次可能的“结束”调用之前的延迟，但也会增加到下一个比较点的时间。默认间隔：100

结束： 必修的。您要在mouseover上调用的函数。函数从jQuery的hover方法接收相同的“this”和“event”对象

超时： 调用“out”函数之前的简单延迟（毫秒）。如果用户在超时过期之前将鼠标移回元素，则不会调用“out”函数（也不会调用“over”函数）。这主要是为了防止草率的/人为的鼠标移动轨迹暂时（或无意地）将用户从目标元素中带走。。。给他们时间回去。默认超时：0

out:

---

必修的。您要调用onMouseOut的函数。函数从jQuery的hover方法接收相同的“this”和“event”对象。注意，仅当在同一次运行中调用了“结束”功能时，hoverIntent才会调用“退出”功能。

以下操作将使滑动停止触发2秒：

$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){
   var $this = $(this);
   if (e.type === 'mouseenter') {
       clearTimeout( $this.data('timeout') );
       $this.slideDown('fast');
   }else{ // is mouseleave:
       $this.data( 'timeout', setTimeout(function(){
           $this.slideUp('fast');
       },2000) );  
   }
 });

$('.icon').hover(function() {
  $('li.icon > ul').delay(2000).slideDown('fast');
}, function() { 
  $('li.icon > ul').slideUp('fast');
});

---

我认为这是您需要的代码：

    jQuery( document ).ready( function($) {  
    var navTimers = [];  
    $('.icon').hover(function() { 
            var id = jQuery.data( this );  
            var $this = $( this );  
            navTimers[id] = setTimeout( function() {  
                $this.children( 'ul' ).slideDown('fast');  
                navTimers[id] = "";  
            }, 300 );  
        },  
        function () {  
            var id = jQuery.data( this );  
            if ( navTimers[id] != "" ) {  
                clearTimeout( navTimers[id] );  
            } else {  
                $( this ).children( "ul" ).slideUp('fast'); 
            }  
        }  
    );  
}); 

或者你可以简单地使用 过渡：所有2个易于进出。

---

请确保为不同的浏览器添加-webkit、-moz和-o。

我想向Paolo Bergantino添加一条信息，您可以在不使用数据属性的情况下执行此操作：

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

---

//编辑：插入代码

这应该是第一个答案。您好。我正在为

slideDown（）

和

slideUp（）

尝试同样的方法，但是

slideUp（）

不起作用。你能告诉我我错过了什么吗？注意：我试图在不使用

hoverIntent（）

函数的情况下执行此操作。@him056您的JSFIDLE中存在范围问题。它在这里工作jquery插件在typescript中不起作用，所以这是我的方式。我认为这基本上实现了相反的效果：悬停动作不会立即触发，但必须悬停至少2秒钟才能发生任何事情。仍然有用，但不完全是问题的答案。我错了吗？我用了很多年，直到我意识到这对于像问题这样的案例来说是一种过度杀伤力。本线程中的手动代码示例运行良好。

var timer;

var delay = 200;

$('#hoverelement').hover(function() {

    on mouse hover, start a timeout

    timer = setTimeout(function() {

       Do your stuff here 

    }, delay);

}, function() {

   Do mouse leaving function stuff here    

    clearTimeout(timer);
});