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

Question

我正在使用 jQuery 插件 FullCalendar 制作一个日历应用程序，并在日历左侧制作了一个选项卡，其中包含 1-6 周。当用户将鼠标拖动到其中一周时，日历会切换到相应 View 的 View 。这可行，但如果用户不小心这样做，可能会很烦人。因此，我想为该函数添加一个延迟，这样只有当用户将鼠标放在该函数上几百毫秒时才会发生这种情况，这样在用户不希望发生的情况下这种情况就会减少。

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

我想在 $('#week3').css('color', 'white'); 之前添加短暂的延迟

Answer 1

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

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 函数不会触发。其他示例仍然会每次调用您的鼠标悬停函数，但只是增加了延迟，因此它们无法实现我认为您想要实现的目标。