Having trouble with javascript object scope and setTimeout?

Question

I've got some code that follows the following structure:

function = roulette(){

    _this = this;
    this.spin = spin;
    this.timeoutFunction = timeoutFunction;

    this.object1 = {
        x : 0
    }

    function spin(){
        if (typeof this.shuffleTimer !== 'undefined') {
            clearTimeout(_this.shuffleStart);
        }
        this.shuffleStart = setTimeout(_this.timeoutFunction(), _this.object1.x);
    }

    function timeoutFunction(){
        this.object1.x += 5;
        //do some DOM manipulation here
        console.log(_this.object.x);
        if(this.object1.x < 5000){
          this.shuffleStart = setTimeout(_this.timeoutFunction(), _this.object1.x);
        }
    }
}

It is definitely not working as intended - while the console.log logs that this.object1.x is increasing, it does so way too fast and at a uniform rate, which is not how it would've been working if the setTimeout in timeoutFunction was set off after an increased amount of time each time it was called.

Several problems here. One of them is that object1 is not the same as _this.object1. — bfavaretto
– bfavaretto, Commented Aug 20, 2013 at 17:38
It looks like object1 and _this are being set globally, not on this (instanceof roulette) and not as variables within new roulette. — Paul S.
– Paul S., Commented Aug 20, 2013 at 17:47
Sorry, this is my mistake, following the original code object1 would've been set as an instance of roulette, I have edited the OP accordingly. — styke
– styke, Commented Aug 20, 2013 at 17:49
Well, you fixed it now. But _this = this should still be var _this = this, as @PaulS. pointed out. — bfavaretto
– bfavaretto, Commented Aug 20, 2013 at 17:53

Paul S. · Accepted Answer · 2013-08-20 18:05:37Z

2

Re-factored your code a little, made it consistent with it's use of this vs _this inside functions. Removed () from functions passed into setTimeout.

All seems to work as you intended.

function Roulette() {
    var _this = this;
    this.object1 = {
        x: 0
    };
    this.spin = function spin() {
        if (undefined !== this.shuffleTimer) clearTimeout(this.shuffleStart);
        this.shuffleStart = setTimeout(this.timeoutFunction, this.object1.x);
    };
    this.timeoutFunction = function timeoutFunction() {
        _this.object1.x += 5;
        console.log(_this.object1.x);
        if(_this.object1.x < 5000){
          _this.shuffleStart = setTimeout(timeoutFunction, _this.object1.x);
        }
    };
}
var r = new Roulette();
r.spin();

answered Aug 20, 2013 at 18:05

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

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

2 Comments

bfavaretto Over a year ago

I suggest you use _this everywhere inside spin; it's being used as an event handler, according to the OP.

styke Over a year ago

When I do newRoulette = new Roulette() The event handler simply calls newRoulette.spin(). Thank you this answer works perfectly!

CodeOwl · Accepted Answer · 2013-08-20 17:37:15Z

0

setTimeout wants to have an inline function as its callback. Change this:

 this.shuffleStart = setTimeout(_this.timeoutFunction(), _this.object1.x);

To this:

 var ctx = this;
 this.shuffleStart = setTimeout(function(){ctx.timeoutFunction()}, _this.object1.x);

answered Aug 20, 2013 at 17:37

CodeOwl

6722 gold badges9 silver badges23 bronze badges

5 Comments

styke Over a year ago

That's not it unfortunately, same result.

Paul S. Over a year ago

@styke are you making the change in both of the two places you call setTimeout?

bfavaretto Over a year ago

@styke How are you calling the whole thing? Also, do you have your browser console open to check for errors?

styke Over a year ago

A self invoking function creates a new instance of the roulette object, after which the spin function is called on mouseclick.

bfavaretto Over a year ago

@styke The onclick handler introduces an additional problem... I suggest you edit the question, and add a jsfiddle example that reproduces all those aspects.

Collectives™ on Stack Overflow

Having trouble with javascript object scope and setTimeout?

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related