scopes in javascript

Question

I have a simpe object in javascript which has few methods..Two of them I want to periodicaly call with window.setTimeout functions. My current code looks like this.

var shakeResolver = function () {
 var resolveTimeout;
 console.log(this);
 var context = this;
 this.startShakeResolve = function () {
     this.resolveTimeout = window.setTimeout(this.call(context.stopShakeResolve, context), 2000);
     $(window)
         .on('devicemotion', this.onDeviceMotion);
 };

 this.onDeviceMotion = function (event) {};

 this.stopShakeResolve = function (context) {
     this.resolveTimeout = window.setTimeout(context.startShakeResolve, settings.interval);

 };

}

The problem is apparently in my misunderstanding how scopes are working, it looks like when calling the function from timeout, it is called from another context where it actually doesn't exist?

In the first call to setTimeout, you're executing a function immediately and actually passing its return value (which happens to be undefined) as the function to call after the timeout. (Edit: that is, of course, assuming that your use of this.call invokes the usual Function.call and not your own variation.) — user1233508
– user1233508, Commented Oct 4, 2012 at 8:09
What is this? Is it a function? How are you calling shakeResolver? To learn more about this, have a look at developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/…. — Felix Kling
– Felix Kling, Commented Oct 4, 2012 at 8:09

Anoop · Accepted Answer · 2012-10-04 08:17:13Z

1

Modified code: Scope of setTimeout is always window Object. you can Change context of function using call apply and bind(bind is not supported by older IE browsers IE <= 8 ).

var shakeResolver = function() {
    this.resolveTimeout;
    console.log(this);
    var context = this;
    this.startShakeResolve = function() {
        this.resolveTimeout = window.setTimeout(function() {
            context.stopShakeResolve.apply(context, arguments);
        }, 2000);

        $(window).on('devicemotion', function(){
                    context.onDeviceMotion.apply(context, arguments);
            });
    };

    this.onDeviceMotion = function(event) {
    };

    this.stopShakeResolve = function(context) {
        this.resolveTimeout = window.setTimeout(function() {
            context.startShakeResolve.apply(context, arguments)
        }, settings.interval);

    };
}

edited Oct 4, 2012 at 8:17

answered Oct 4, 2012 at 8:11

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

Comments

Konstantin Dinev · Accepted Answer · 2012-10-04 08:09:25Z

1

call() takes as first parameter the context which the function is called from. This means that your this.call(context.stopShakeResolve, context) makes your context be context.stopShakeResolve which means that when the function is called this is equivalent to context.stopShakeResolve.

Just to make it clearer:

this.stopShakeResolve = function (context) {
    this.resolveTimeout = window.setTimeout(context.startShakeResolve, settings.interval);
};

Does not have a function inside it called shakeResolver so it would throw an exception on you saying that it does not have property or method called this way. Change the call to the following:

this.stopShareResolve.call(this, context)

answered Oct 4, 2012 at 8:09

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

Collectives™ on Stack Overflow

scopes in javascript

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