将 setTimeout 添加到现有 jQuery 脚本的语法问题

Question

我想在以下代码中添加 setTimeout ，以便在执行 fadeOut 效果之前有一个短暂的暂停。

$(document).ready(function() {  
    $('#menu li').hover(
        function() {
            $('ul', this).slideDown(50);
        }, 
        function() {
            $('ul', this).fadeOut(100);
        }
    );
});

这就是我正在尝试的，但我猜语法一定是错误的：

$(document).ready(function() {  
    $('#menu li').hover(
        function() {
            $('ul', this).slideDown(50);
        },
        function() {
            setTimeout(function() {
                $('ul,' this).fadeOut(100);
            });
        }
    );
});

抱歉，如果这是一个愚蠢的问题。我是 jQuery 的初学者。

Answer 1

this 的含义在 setTimeout() 中是不同的。您需要在变量中引用所需的 this 或首先获取 ul 并引用它。

var th = this;
setTimeout(function() {
    $('ul', th).fadeOut(100);
});

或者

var $ul = $('ul',this);
setTimeout(function() {
    $ul.fadeOut(100);
});

Answer 2

您可能还需要使用 clearTimeout() （如果您快速将鼠标悬停在/退出），类似这样的操作会起作用：

$(function() {  
  $('#menu li').hover(function() {
    clearTimeout($.data(this, 'timer'));
    $('ul', this).slideDown(50);
  }, function() {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul,' this).fadeOut(100);
    }, this), 400));
  });
});

这使用 $.data()，目前有400ms的延迟，只需相应调整即可。