jQuery - Try to understand setTimeout function

Question

I currently have an element and when I 'mouseenter' that element there should be a delay before the code in 'mouseenter' is executed.

I've achieved that with the following code:

$('.element').mouseenter( function() {
    setTimeout(function() {
        $('#output').append("Mouse enter.</br>");
    },5000);
});

So here, in my output 'Mouse enter.' will be placed but only after 5 seconds. Now, when my mouse cursor is moved out of the element within the 5 seconds, the code should not be executed.

I've tried with the following javascript function but it isn't working:

$('.element').mouseout( function(e) {
    e.stopPropagation();
});

I've created a fiddle demo to show it:

http://jsfiddle.net/836dS/5/

Basiclly the question is:

"How can I cancel my code which is in my timeout function" when my mouse moves out of the area on which the mouseenter is set?"

You are not defining e anywhere. e is a parameter name commonly used for the event object that jQuery event handlers get passed as a parameter. — pmandell
– pmandell, Commented Jun 26, 2014 at 20:46
what's e in $('.element').mouseout( function() { e.stopPropagation(); }); — Jorge Zuverza
– Jorge Zuverza, Commented Jun 26, 2014 at 20:46
Sorry but it's not working. If I remove my mouse within the 5 seconds, the content is still added to the output. I need to cancel the code in the timeout on mouseleave. — Complexity
– Complexity, Commented Jun 26, 2014 at 20:47

entropic · Accepted Answer · 2014-06-26 20:48:09Z

1

setTimeout and e.stopPropagation() have nothing to do with each other. In fact, setTimeout is native to javascript and you don't need jQuery to call it. The correct way to stop a timer is to set it to a variable, and then clear it using clearTimeout

Like so:

var timer;
$('.element').mouseenter( function() {
    timer = setTimeout(function() {
        $('#output').append("Mouse enter.</br>");
    },5000);
});

$('.element').mouseout( function() {
    clearTimeout(timer);
});

answered Jun 26, 2014 at 20:48

entropic

1,68314 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2014-06-26 20:48:01Z

0

Use clearTimeout() to kill the setTimeout() (and chain your handlers together):

var clr;
$('.element').mouseenter( function() {
    clr = setTimeout(function() {
        $('#output').append("Mouse enter.</br>");
    },5000);
}).mouseout( function() {
    clearTimeout(clr);
});

jsFiddle example

answered Jun 26, 2014 at 20:48

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

Complexity Over a year ago

Thanks, that was exactely the thing I was looking for.

rfreytag · Accepted Answer · 2014-06-26 20:45:03Z

0

well, you might want to assign the setTimeout to a variable and then call clearTimeout() instead of e.stop...().

Clearing the timeout should stop it and not call the function.

EDIT:

Here is a good example of how to do it: enter link description here I hope it helps!

answered Jun 26, 2014 at 20:45

rfreytag

1,20312 silver badges18 bronze badges

Comments

PugsOverDrugs · Accepted Answer · 2014-06-26 21:03:22Z

0

I would do something along these lines. Use a boolean to keep track of mous

var window.mouseIn;
$('.element').mouseenter( function() 
{
    window.mouseIn = true; 
    setTimeout(function() 
    {
        if ( window.mouseIn )
        {
            $('#output').append("Mouse enter.</br>");
        }
    },5000);
});

$( '.element' ).mouseout( function)(
{
    window.mouseIn = false;
}

When the timeout is over, if mouseIn is true ( meaning they havent moved the mouse out ), then you will append.

Working fiddle: http://jsfiddle.net/j08691/836dS/6/

edited Jun 26, 2014 at 21:03

answered Jun 26, 2014 at 20:46

PugsOverDrugs

5351 gold badge4 silver badges14 bronze badges

1 Comment

PugsOverDrugs Over a year ago

window.mouseIn is how you explicitly declare a 'global' variable that can be called across scripts and functions.

Collectives™ on Stack Overflow

jQuery - Try to understand setTimeout function

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related