Question

我正在使用jQuery插件FullCalendar创建一个日历应用程序，我在日历的左侧创建了一个标签，其中的周数为1-6。当用户在一周内拖动鼠标时，日历切换到相应视图的视图。这可以工作，但如果他们意外地这样做，它可能会让用户烦恼。所以，我想在函数中添加一个延迟，这样只有当用户将鼠标放在它上几百毫秒时才会发生这种情况，所以如果没有用户希望它发生就会发生这种情况。

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

我想在$('#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的值到期之前将鼠标移离悬停目标，则不会触发鼠标悬停功能。其他示例仍然会每次都调用您的鼠标悬停功能，但只是增加了延迟，因此它们不适用于我认为您要实现的目标。

Answer 3

您正在寻找setTimeout

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

3 个答案: