如何爲鼠標懸停功能添加延遲？

我正在製作一個使用jQuery插件FullCalendar的日曆應用程序，並且我在日曆的左側製作了一個選項卡，其中1-6個星期的時間都在上面。當用戶將鼠標拖過一週時，日曆切換到相應視圖的視圖。這可以工作，但如果用戶意外執行操作，可能會讓用戶感到煩惱。所以，我想給函數添加一個延遲，以便只有當用戶將鼠標放在它上面幾百毫秒時纔會發生，所以在用戶不希望它發生的情況下會發生這種情況。如何爲鼠標懸停功能添加延遲？

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

我想以前$('#week3').css('color', 'white');

來源

2013-08-20 Snubber

http://stackoverflow.com/questions/3661635/adding-delay-to-jquery-event-on-mouseover –

如果我理解正確，那麼你會需要像下面這樣更完整的解決方案

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的值到期之前用戶將鼠標移出懸停目標時，鼠標懸停功能不會觸發。其他示例每次仍然會調用您的鼠標懸停功能，但只是延遲一段時間，所以它們無法用於我認爲您要實現的目標。

來源

2013-08-20 14:47:48 Epiphany

-1

添加一個短暫的延遲，你正在尋找setTimeout

來源

2013-08-20 14:29:10 ars265

你能至少把一個例子或文檔鏈接？什麼？ – TecHunter

使用超時：

$('#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')); 
    } 
});

來源

2013-08-20 14:29:16 adeneo

這不會做OP所要求的，因爲它仍然會調用css函數，但現在延遲了。除非等待時間已過，否則OP要阻止該功能運行。 – Epiphany

給@adeno支持更新他的代碼的例子，現在支持OP問題 – Epiphany

@Epiphany - 謝謝，沒有完全讀完這個問題！ – adeneo

如何爲鼠標懸停功能添加延遲？

回答

相關問題