我如何为此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);
    });