如何为鼠标悬停功能添加延迟？

Question

我正在使用jQuery插件FullCalendar创建日历应用程序，并且在日历左侧创建了一个标签，其中包含1-6周。 当用户将鼠标拖到一周的某一周时，日历将切换到相应视图的视图。 这可以工作，但是如果用户不小心这样做可能会很烦人。 因此，我想为该功能添加一个延迟，以便仅在用户将鼠标放在其上数百毫秒的情况下才会发生此延迟，因此在用户不希望发生的情况下发生的延迟会更少。

$('#week3').mouseover(function() {
    $('#week3').css('color', 'white');
    $('#week3').css('background-color', '#6B8BA9');
    $('#week3').week3();

我想在$('#week3').css('color', 'white');前添加一小段延迟$('#week3').css('color', 'white');

Answer 1

使用超时：

$('#week3').on({
    mouseenter: function() {
        var that = this;

        $(that).data('timer', 
            setTimeout(function() {
                $(that).css('color', 'white');
            },1000)
        ).css('background-color', '#6B8BA9').week3();
    },
    mouseleave: function() {
        clearTimeout( $(this).data('timer') );
    }
});

Answer 2

如果我对您的理解正确，那么您将需要一个更完整的解决方案，如下所示

var mouse_monitor

$('#week3').mouseover(function() {
  mouse_monitor = setTimeout(function(){
    $('#week3').css('color', 'white');
    $('#week3').css('background-color', '#6B8BA9');
    $('#week3').week3();
  }, 1500)
}); 

$('#week3').mouseout(function() { clearTimeout( mouse_monitor ); }

var mouse_monitor是对您的超时功能的全局引用。 mouseout函数在其他文章中缺失，这确保了如果用户在setTimeout值到期之前将鼠标移离悬停目标，则不会触发mouseover函数。 其他示例仍然会每次都调用mouseover函数，但是会增加延迟，因此它们对我认为您要实现的目标无效。

Answer 3

您正在寻找setTimeout