jquery this not working with settimeout, bug?

Question

so I am trying to do some dynamic hover manipulations, which require using this in jquery. For some reason that I cannot figure out, the javascript setTimeout function does not seem to support it.

I understand that the setTimeout function is not Jquery, but if placed inside a Jquery function, shouldn't it be able to respond to the relevant this?

Here is some sample code:

var go = false;
var t;
$('.box').mouseenter(function(){
    t = setTimeout(function(){
        go = true;
        alert($('span',this).text());
    },1000);
});
$('.box').mouseleave(function(){
    clearTimeout(t);
    if(go){
        alert($('span',this).text());
    }
});

when hovering for 1 second it will alert a blank, yet on mouseleave it will alert the correct text even though both alerts are inside a Jquery function with the same selector.

Why does this happen and how can I fix it?

jsfiddle

Arun P Johny · Accepted Answer · 2013-08-13 15:52:30Z

12

Since the callback to setTimeout() is executed separate from the main thread, the execution context of the callback will be different so this inside the callback does not point the same object as it was outside the setTimeout, in this case the hovered .box element.

One possible solution here is to use the $.proxy() method to pass a custom execution context for the callback method

 $('.box').mouseenter(function(){
    t = setTimeout($.proxy(function(){
        go = true;
        alert($('span',this).text());
    }, this),1000);
 });

Demo: Fiddle

Another solution is to use a closure variable

$('.box').mouseenter(function(){
    var self = this;
    t = setTimeout(function(){
        go = true;
        alert($('span', self ).text());
    },1000);
});

Demo: Fiddle

edited Aug 13, 2013 at 15:52

answered Aug 13, 2013 at 15:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Ryan Saxe Over a year ago

thank you! I used the first one...I use jquery functions inside the setTimeout with their own this selectors and the other one made that buggy even if I kept their individual thiss for some reason

Lee Meador · Accepted Answer · 2013-08-13 15:50:04Z

4

You can just save the value of this somewhere:

$('.box').mouseenter(function(){
    var elem = this;
    t = setTimeout(function(){
        go = true;
        alert($('span', elem).text());
    },1000);
});

The reason you have to do this is that 'this' gets a new value pretty much whenever a new function gets called. So when the timer stuff calls your inner function, 'this' isn't the same as it is when the mouse stuff calls your outer function.

Technically, the 'this' is called the execution context.

What the code above does is creates a variable inside the closure created when the outer function gets called. We store 'this' in that variable, 'elem', and use it later when the timeout occurs.

answered Aug 13, 2013 at 15:50

Lee Meador

13k2 gold badges38 silver badges43 bronze badges

Collectives™ on Stack Overflow

jquery this not working with settimeout, bug?

jsfiddle

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related