超时和添加类答案

【问题标题】：Timeout and adding class超时和添加类
【发布时间】：2014-10-16 12:14:53
【问题描述】：

当鼠标在元素上停留超过 2 秒时，我尝试向元素添加类。只有这样，如果鼠标是例如 1.5 秒，然后移动到另一个计时器被清除。

换句话说：只有当有人超过元素 2 秒时，它才应该展开我的菜单：

    var timeoutId;

$("#block_top_menu .sf-menu > li > ul > li").hover(function() {
    if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
            timeoutId = null;
            $(this).addClass("hover");
        }, 2000);
    }
}, function() {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    else {
        $(this).removeClass("hover");
    }
});

但该代码没有添加此类。有人可以帮忙吗？

【问题讨论】：

这不适用于任何触控设备（iOS、Android），您应该仔细研究jQuery-menu-aim，如果您可以确认它在触控设备上不起作用，我很乐意提供一个示例答案。请提供示例 HTML

标签： jquery hover timeout

【解决方案1】：

问题在于，在 timeOut 内部，this 指向 window 对象 (window.setTimeout)，而不是悬停的元素。你必须缓存它。

 var timeoutId;
$("#block_top_menu .sf-menu > li > ul > li").hover(function () {
   $this = $(this);
   if (!timeoutId) {
       timeoutId = window.setTimeout(function () {
           timeoutId = null;
           $this.addClass("hover");
       }, 2000);
   }
}, function () {
   $this = $(this);
   if (timeoutId) {
       window.clearTimeout(timeoutId);
       timeoutId = null;
       $this.removeClass("hover"); // Assuming you want to remove it after clearing interval?
   } else {
       $this.removeClass("hover");
   }
});

旁注：您实际上不必经历手动取消超时的麻烦，现代浏览器在垃圾收集方面做得很好 AFAIK

【讨论】：

【解决方案2】：

来自 abc123 关于触控设备的一个很好的说明。但如果这不是你的情况，我建议这样做：

var timeoutId;

$("#block_top_menu .sf-menu > li > ul > li").hover(function (e) {
    timeoutId = setTimeout(function () {
        $(e.target).addClass("hover");
    }, 2000);
}, function () {
    clearTimeout(timeoutId);
});

用按钮查看demo（因为我没有你的标记）。

【讨论】：