Question

当鼠标长于2秒时，我尝试将元素添加到元素。只有这样，如果鼠标是例如1.5秒然后移动到另一个，则清除计时器。

换句话说：只有当元素超过元素时才会扩展我的菜单：

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

旁注：您实际上不必经历手动取消timeOuts的麻烦，现代浏览器在垃圾收集方面做得很好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（因为我没有你的标记）。

超时和添加课程

2 个答案: