jQuery的悬停延迟答案

【问题标题】：Hover delay with jQueryjQuery的悬停延迟
【发布时间】：2016-03-11 23:08:46
【问题描述】：

我正在尝试在下拉菜单的悬停效果期间实现时间延迟。我正在尝试使用 setTimeout 并且下拉菜单在悬停时确实可以正常工作，但我没有得到延迟。它只是瞬间发生。以下是我的代码：

$(document).ready(function(){
    $("li.dropdown-hover").hover(hoverIn, hoverOut);
});

function hoverIn(){
    setTimeout(func1(this), 3000);
}

function hoverOut(){
    setTimeout(func2(this), 1000);
}

function func1(element) {
    $(element).find(".dropdown-menu-hover").css("display", "block");
}

function func2(element) {
    $(element).find(".dropdown-menu-hover").css("display", "none");
}

我对 jQuery 很陌生，出于某种原因，我不希望使用任何外部插件，例如 http://cherne.net/brian/resources/jquery.hoverIntent.html，这在许多类似问题中都有建议。谁能告诉我这里出了什么问题？

【问题讨论】：

标签： jquery jquery-hover

【解决方案1】：

当您编写setTimeout(func1(this), 3000); 时，您将立即调用func1 函数。和这个是一回事：

func1(this);
setTimeout(undefined, 3000);

相反，您想向setTimeout 传递一个新函数，该函数将在分配的时间之后运行。

var self = this;
setTimeout(function() {
  func1(self);
}, 3000);

或者您可以将 this 作为额外参数传递，如 Richard B 所示。

【讨论】：

感谢您的回答。不知何故，setTimeout 无法访问“this”（它被视为窗口对象而不是“li”），所以我通过将它存储在变量中做了一个解决方法。它现在工作:-)

【解决方案2】：

你可以像这样使用jQuery的默认函数.delay：

$('.a').hover(function () {
    $('.b').delay(2000).fadeIn(200);
});

jsFiddle：https://jsfiddle.net/sukritchhabra/upkgtLyn/1

【讨论】：

【解决方案3】：

我相信你必须将参数传递给函数，如下所示：

setTimeout(func1, 3000,this);

相对

setTimeout(func1(this), 3000);

【讨论】：