Stop duplicate mouse over detection

Question

I have a popup that is executed on mouseover with jquery.

Within that function I have a second delay before the popup displays using settimeout

Problem is if in that second they mouse over multiple times then multiple popups are triggered.

$('#div').mouseover(function() {setTimeout("popup()",1000);});

What I need to do is disable the detection and then re enable it in popup().

How might I do that?

Answer 1

I guess something like this

(function(){
    var popup_timer = 0;
    $('#div').mouseover(function() { 
        clearTimeout(popup_timer);
        popup_timer = setTimeout("popup()",1000);
    });
});

EDIT updated code, clearTimeout added, wrapped

Answer 2

You can use .hover() with a clearTimeout(), like this:

$('#div').hover(function() {
  $.data(this, 'timer', setTimeout(popup, 1000)); 
}, function() {
  clearTimeout($.data(this, 'timer'));
});

This clears the timeout you're setting if the mouse leaves, you'll have to stay on the element for a full second for the popup to trigger. We're just using $.data() on the element to store the timer ID (so we know what to clear). The other change is to not pass a string to setTimeout() but rather a reference directly to the function.