How do I add a delay to the mouseover function?

Question

I'm making a calendar app using the jQuery plugin FullCalendar and I made a tab to the left of the calendar with the weeks from 1-6 on it. When the user drags their mouse over one of the weeks the calendar switches to the view of the respective view. This works but it can be annoying for the user if they do it accidentally. So, I want to add a delay to the function so that it will only happen if the user has their mouse on it for a few hundred milliseconds so it will happen less without the user wanting it to happen.

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

I want to add a short delay before $('#week3').css('color', 'white');

http://stackoverflow.com/questions/3661635/adding-delay-to-jquery-event-on-mouseover — Maciej Czekaj, Aug 20 '13 at 14:28

adeneo · Answer 1 · 2013-08-20T15:33:30.293

2

Use a timeout :

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

edited Aug 20 '13 at 15:33

answered Aug 20 '13 at 14:29

adeneo

312,895
29
395
388

This will not do what the OP asked, as it will still invoke the css function, but now with a delay. The OP wants to prevent the function from running unless the wait time has expired. – Epiphany Aug 20 '13 at 14:58
Gave @adeno back the point for updating his code to an example that now supports the OPs question – Epiphany Aug 20 '13 at 15:53
@Epiphany - thanks, didn't read the question thoroughly enough ! – adeneo Aug 20 '13 at 15:57

score 2 · Accepted Answer · answered Aug 20 '13 at 14:47

If I am understanding you correctly, then you will need a more complete solution like below

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 ); }

The var mouse_monitor is a global reference to your timeout function. The mouseout function is missing in other post, which assures that your mouseover function will not fire if the user moves the mouse off the hover target before the value of the setTimeout expires. Other examples will still invoke your mouseover function everytime, but with just an added delay, so they won't work for what I think you are trying to achieve.

score -1 · Answer 3 · answered Aug 20 '13 at 14:29

-1

you are looking for setTimeout

answered Aug 20 '13 at 14:29

ars265

1,949
3
21
37

could you at least put an example or doc link? something? – TecHunter Aug 20 '13 at 14:43

How do I add a delay to the mouseover function?

3 Answers3