using javascript setTimeout causes a loss of data within an object?

Question

Background:
I've written a javascript object called Step to implement a step-type event for any operation I might need to use for my website, e.g. smooth-motion functions. I can register functions in it to run each step by using the Step object's method, registerFunction(func).

To handle running the functions every step, the Step object has another method called run(). In this method I run through the list of registered functions, run them, and then call the setTimeout(...) function, passing the reference to the run function to recall it for the next step.

Problem:
The first 'step' is run by the onload event (attribute) in the <body> tag of my html page (indirectly, though: Step.run is called by a function initiateJS() which is called by onload). Nothing goes wrong in the first step. However, by the second step, the variables within the Step object seem to have been disposed; they all become undefined.

Questions:
I was thinking it might be due to the garbage collector? Maybe it somehow loses its reference?
Also, is using setTimeout(...) even the best method of making a step-type event implementation?

Details:
The Step object is declared in the js document somewhat as:

    var Step = {
            myVars: "somevalues",
            anArray: [],
            run: function() {
                //run the registered functions
                setTimeout(this.run,this.interval);
        };

ALSO, in the next step, the Step object is still existent.

Some other minor details:

I'm using Chrome

I'm making my website with XAMPP full

I'm using Windows 7

Is there a reason why you don't want to use setInterval?

dwerner
– dwerner

2012-05-03 22:55:20 +00:00
Commented May 3, 2012 at 22:55 — dwerner
– dwerner, Commented May 3, 2012 at 22:55

bhamlin · Accepted Answer · 2012-05-03 22:58:16Z

1

setTimeout runs code in the global context. this is no longer defined the next time run() executes. You'll need to refactor your code to either declare variables on some kind of global object, or to pass references into the run function itself.

edit: since you said Step is global, this should work:

run: function() {
    //run the registered functions
    setTimeout(Step.run, Step.interval);
}

answered May 3, 2012 at 22:58

bhamlin

5,1971 gold badge24 silver badges17 bronze badges

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

1 Comment

Codesmith Over a year ago

How would I declare a global object that would preserve its variables?

Elias Zamaria · Accepted Answer · 2012-05-03 22:54:36Z

1

Change your run function to this:

run: function() {
    var that = this;
    setTimeout(that.run, that.interval);
}

The setTimeout function redefines the this variable and this is the simplest way I can think of to work around this issue.

answered May 3, 2012 at 22:54

Elias Zamaria

102k34 gold badges122 silver badges152 bronze badges

3 Comments

bhamlin Over a year ago

Won't this still break, because this is still undefined the next run is executed? And so that will be set to undefined?

Codesmith Over a year ago

Tried it and it didn't work. And I don't see how this answers the problem at all.

bhamlin Over a year ago

Rather, this is the window object next time it's run. Putting var that = this in the function accomplishes nothing, since you're effectively doing var that = window, and window.run is still undefined.

Collectives™ on Stack Overflow

using javascript setTimeout causes a loss of data within an object?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related