javascript - 我将如何为此 JQuery 事件添加延迟？

Question

这是一个追加一些 html 的事件:

   $("#feed").live("mouseover", function(){
       $("#main").append('<div class="help_div" id="feed_help"><p>Your feed shows you information on the users you follow, such as songs added, voting, commenting, following, and the showing of songs between users.</p></div><div class="arrow" id="feed_arrow"></div>');
    });

我怎样才能使鼠标悬停在所选元素上和附加 html 之间有 2000 毫秒的间隔？

Answer 1

您将使用超时。

$("#feed")
    .live("mouseover", function() {
        $(this).data("timeout", setTimeout(function() {
            $("#main").append('<div class="help_div" id="feed_help"><p>Your feed shows you information on the users you follow, such as songs added, voting, commenting, following, and the showing of songs between users.</p></div><div class="arrow" id="feed_arrow"></div>');    
        }, 2000));
    });

这将在运行代码之前等待 2 秒，但如果您将鼠标移出该元素，它仍会在 2 秒后显示。所以你要做的是添加一个 clearTimeout 事件。如果您没有悬停，这将确保超时不会滴答。

$("#feed")
    .live("mouseout", function() {
        var timer = $(this).data("timeout");
        if (timer)
            clearTimeout(timer);
    });