jQuery - 仅当事件足够长时才触发鼠标悬停

Question

在我有一个日历的页面上，将光标移动到 AJAX 调用发送到服务器以检索当天事件的日期。然后将事件列在日历旁边的 div 中。 这可以正常工作。

问题是：如果光标所在的日期不在日历的一侧，但它是内部的，则不可能将光标从日历上移开而不触发另一个显示事件的调用改天。
这是因为“鼠标悬停”事件会在光标在其他日子移动时立即触发。
我需要的是仅当光标在当天停留很少时间（比如说 500 毫秒）时才触发 jQuery 函数，而不仅仅是它只是通过它。
那么，是否可以对 jQuery 说：“如果 mouseove 持续至少 500 毫秒，则触发函数，如果没有，则不执行任何操作”？

我现在的jQuery函数是

$('div#eventi-home').on('mouseover', 'li.calday', function() {  
    var $li = $(this),  
    form_data = {  
        day: $li.data('giorno'),  
        month: $li.data('mese'),  
        year: $li.data('anno')  
    };  

    $.ajax({  
        url: "<?php echo base_url('home/events_of_the_day/') ?>",  
        type: 'POST',  
        data: form_data,  
        success: function(msg) {  
            $('div#events-of-the-day').html(msg);  
        }  
    });  
});  

一天有这个代码

<li class="calday" data-giorno="14" data-mese="11" data-anno="2013" >14</li>  

如何更改我的功能？

Answer 1

hoverIntent 插件非常适合：

http://cherne.net/brian/resources/jquery.hoverIntent.html

---

$('div#eventi-home li.calday').hoverIntent(function() {  
    var $li = $(this),  
    form_data = {  
        day: $li.data('giorno'),  
        month: $li.data('mese'),  
        year: $li.data('anno')  
    };  

    $.ajax({  
        url: "<?php echo base_url('home/events_of_the_day/') ?>",  
        type: 'POST',  
        data: form_data,  
        success: function(msg) {  
            $('div#events-of-the-day').html(msg);  
        }  
    });  
}, null); 

Answer 2

您可以使用超时：

$('div#eventi-home').on('mouseover mouseout', 'li.calday', function (e) {
    clearTimeout(window.timeout);
    if (e.type === "mouseout") return;
    window.timeout = setTimeout(function () {
        //CODE HERE...
    }, 500);
});