javascript - 如何在执行悬停功能之前添加等待时间

Question

我正在处理嵌套菜单，当我的鼠标移到选项上时，会显示一个子列表。 这是我的悬停功能:

$( ".sublist" ).parent().hover( function () {
    $(this).toggleClass("li_hover",300); //use to change the background color
    $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});

现在，我想在子列表显示之前添加一个短句，以防止用户疯狂移动鼠标。有人对此有好的建议吗？

---

更新:

谢谢你们，我对我的程序做了一些改变，最近看起来像这样:

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        setTimeout(doSomething_hover($(this)), 3000);
    });
}):

这很奇怪，setTimeout 不会延迟任何事情。但如果我将函数调用更改为 doSomething_hover (不带“()”)，该函数将延迟良好。但我无法将任何 jquery 元素传递给该函数，所以它仍然不起作用，有人可以告诉我如何使 doSomething_hover($(this)) 在 setTimeout 中工作？

---

更新2: 得到了 setTimeout 的工作，但这似乎不是我想要的: 我真正想要的是，如果鼠标悬停在选项上的时间少于 0.5 秒，则不会发生任何事情。

无论如何，这是我使 setTimeout 工作的代码:

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        var e = $(this);
        setTimeout(function () { doSomething_hover(e); }, 1000);
    });
}):

---

最终更新: 当我将鼠标移出时，我通过使用clearTimeout 完成了这项工作。 所以代码应该是:

    $( ".sublist" ).parent().mouseover( function () {
        var e = $(this);
        this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
    });

    $( ".sublist" ).parent().mouseout ( function () {
        if(this.timer){
            clearTimeout(this.timer);
        }
        if($(this).hasClass("li_hover")){
            $(this).toggleClass("li_hover");
        }
        $(this).find(".sublist").hide("slide", {}, 500);

    });

这是$(document).ready()中的部分。其他代码与上面相同。

---

真的。最终更新: 因此，mouseover 和 mouseout 有时会导致错误，因为当我将鼠标移动到子列表时，父级的 mouseover 事件将触发，并隐藏子列表。 问题可以通过使用hover函数来解决:

    $( ".sublist" ).parent().hover( 
        function () {
            var e = $(this);
            this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
        },
        function () {
            if(this.timer){
                clearTimeout(this.timer);
            }
            $(this).find(".sublist").hide("slide", {}, 500);
            if($(this).hasClass("li_hover")){
                $(this).toggleClass("li_hover",300);
            }
        }
    );

谢谢大家

Answer 1

请尝试一下:

代码

setInterval(doSomthing_hover, 1000);


function doSomthing_hover() {
    $(".sublist").parent().hover(function() {

        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    });

}​

SetTime 与 setInterval

从根本上来说，了解 JavaScript 计时器的工作原理非常重要。通常，由于它们所在的单线程，它们的行为不直观。让我们首先检查我们可以访问的三个可以构造和操作计时器的函数。

var id = setTimeout(fn,delay); - 启动一个计时器，该计时器将在延迟后调用指定的函数。该函数返回一个唯一的 ID，稍后可以使用该 ID 取消计时器。

var id = setInterval(fn,delay); - 与 setTimeout 类似，但不断调用该函数(每次都有延迟)直到被取消。

clearInterval(id);、clearTimeout(id); - 接受计时器 ID(由上述任一函数返回)并停止计时器回调的发生。

为了理解定时器的内部工作原理，需要探索一个重要的概念:定时器延迟是无法保证的。由于浏览器中的所有 JavaScript 都在单线程上执行，异步事件(例如鼠标单击和计时器)仅在执行中出现空缺时才会运行。

进一步阅读: http://ejohn.org/blog/how-javascript-timers-work/