超时和添加类

Question

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

也就是说:只有当有人超过element:

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");
    }
});

但是代码没有添加这个类。有人能帮忙吗?

Answer 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

Answer 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 with button(因为我没有你的标记)