如何使用超时添加类答案

【问题标题】：How to addclass with timeout如何使用超时添加类
【发布时间】：2012-11-22 07:21:39
【问题描述】：

不知道为什么它不起作用，我认为代码很好 - 你能告诉我哪里出了问题吗？我需要在一段时间后添加一些课程......

$('.main_menu ul li').mouseenter(function(){
    setTimeout(function(){
        $(this).children('.sub_menu_main').addClass('opened')
    },200);
});
$('.main_menu ul li').mouseleave(function(){
    $(this).children('.sub_menu_main').removeClass('opened')
});

【问题讨论】：

你也能展示你的html元素吗？
您确认您的选择器语句返回了正确的 HTML 元素吗？
明智的做法是创建一个简洁地重现问题的 JSFiddle (jsfiddle.net)。这样做时，您通常会自己发现问题，但至少您可以将您的问题与该问题的完整工作示例相关联。
您需要在超时时传递对“this”的引用，因为它在事件之外执行。

标签： javascript jquery timeout addclass removeclass

【解决方案1】：

$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this; //in scope
        $(self).data('timer', setTimeout(function(){ //new scope
            $(self).children('.sub_menu_main').addClass('opened'); //out of scope
        },200);
    },
    mouseleave: function(){
        clearTimeout($(this).data('timer'));
        $(this).children('.sub_menu_main').removeClass('opened');
    }
});

【讨论】：

不错的一个有双重事件的，但它不应该是自我，而不是 $(self) ？
这很好但是，现在所有的 .sub_menu_main 都打开了类，并且在 mouselaeve 之后没有删除它......
@mplungjan：不，$() 将 DOM 引用包装在一个 jQuery 对象中以访问 .children() 方法。您可以使用 var that = $(this) 创建一个引用 jQ 对象的本地 var，然后在回调中不需要 $() ... PS：@adeneo：self 可能并不总是最明智的 varnames它可以是对全局对象的引用（window.self 或 worker 中的）
@ŁukaszBorawski - 这可能是因为您的鼠标在超时添加类之前离开了元素，这实际上是它的预期工作方式。为确保不会发生这种情况，您必须在 mouseleave 函数中清除超时。
@EliasVanOotegem - 我倾向于在我的变量中引用 DOM 元素，因为在 jQuery 中包装元素比取回 DOM 元素更容易，而且我更倾向于使用原生 DOM 元素很多。我从来没有遇到过self 的问题，而且在工作人员内部你无论如何都无法访问 DOM，所以这一点有点沉默！

【解决方案2】：

我相信this 没有引用您认为它在该范围内所做的事情。您应该尝试在外部范围中存储对此的引用，然后通过该引用访问悬停的元素：

$('.main_menu ul li').mouseenter(function(){
    var that = this;
    setTimeout(function(){
        $(that).children('.sub_menu_main').addClass('opened')
    },200);
});

【讨论】：

@mplungjan 不确定您在问什么？ this 指回调中的 DOM 元素，据我所知，因此您需要在调用任何方法之前将其传递给 jQuery 函数。
另一条评论回答了它。我会考虑var $that=$(this) 并使用 $that 而不是将曾经是 jQuery 对象的东西包装在 jQuery 对象中以将其取回