这将使第二个函数在执行前等待 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);
});

当用户重新悬停时，它还清除超时以避免疯狂行为。

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

我个人喜欢“hoverIntent”插件：

http://cherne.net/brian/resources/jquery.hoverIntent.html

来自页面：hoverIntent 是一个插件，它试图确定用户的意图......就像一个水晶球，只有鼠标移动！它的工作原理类似于（并且源自）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

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

过： 必须。您想调用 onMouseOver 的函数。您的函数接收与 jQuery 的悬停方法相同的“this”和“event”对象。

timeout： 在调用“out”函数之前的简单延迟，以毫秒为单位。如果用户在超时到期之前将鼠标移回元素上，则不会调用“out”函数（也不会调用“over”函数）。这主要是为了防止草率/人类鼠标轨迹暂时（和无意）使用户离开目标元素......让他们有时间返回。默认超时：0

出： 必须。您想调用 onMouseOut 的函数。您的函数接收与 jQuery 的悬停方法相同的“this”和“event”对象。注意，如果在同一次运行中调用了“over”函数，hoverIntent 只会调用“out”函数。

一般的想法是使用setTimeout，像这样：

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

但是，如果用户先将鼠标移开然后又快速移入，这可能会违反直觉——当用户再次将鼠标悬停在它上面时，这并不能清除超时。那将需要额外的状态。

以下将阻止滑动触发 2 秒：

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

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