Javascript context within a function

Question

I am binding a function to an event.

$('div.my_div').bind("mouseenter", timerFunc);

The problem that I have is that my context changes and I cannot access my elements. I must admit that javascript context is terribly confusing to me:

function timerFunc() {
    //alert('Square ' + $(this).attr('data-somevalue') + ' named function called!');
    var count_to = 10;
    var count = 0;
    var countup = setInterval(function () {
        count++;
        $(this).find('.countup').html(count + ' seconds!'); // <-- trying to access THIS square
        //self.find('.countup').html(count + ' seconds!'); // <-- trying to access THIS square
        if (count == count_to) {
            count = 0;
        }
    }, 750);
}

Please help

Bhojendra Rauniyar · Accepted Answer · 2015-01-19 15:18:10Z

2

Store $(this) in a variable and use it in your nested function:

function timerFunc() {
    //alert('Square ' + $(this).attr('data-somevalue') + ' named function called!');
    var elem = $(this);//$(this) is stored in elem variable
    var count_to = 10;
    var count = 0;
    var countup = setInterval(function () {
        count++;
    //so you can use it here in nested function
        elem.find('.countup').html(count + ' seconds!'); // <-- trying to access THIS square
        //self.find('.countup').html(count + ' seconds!'); // <-- trying to access THIS square
        if (count == count_to) {
            count = 0;
        }
    }, 750);
}

answered Jan 19, 2015 at 15:18

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

Comments

Amit Joki · Accepted Answer · 2015-01-19 15:17:53Z

2

setInterval executes in global context that is window, so this is window. So cache the variable and use it instead

var that = this;
var countup = setInterval(function () {
    count++;
    $(that).find('.countup').html(count + ' seconds!');
    if(count == count_to) {
       count = 0;
    }
}, 750);

answered Jan 19, 2015 at 15:17

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Collectives™ on Stack Overflow

Javascript context within a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related