Question

In my application I have an object with several properties that get set in various places in the application.

In one of my prototype functions I have a function that runs in intervals to update a timer, and in that function the property (this.)theTime should be set. The problem is that this doesn’t happen, and I guess the reason is that this.theTime points to the function itself instead of the object.

Below is two versions of my code, and neither of them works. Any tips for me?

// 1.
function changeTime() {
    this.theTime = setTime(time);
    time.setSeconds(time.getSeconds()+1);
    p1.html(this.theTime);
}
interval = setInterval(changeTime(), 1000 );

// 2.
function changeTime(theTime) {
    theTime = setTime(time);
    time.setSeconds(time.getSeconds()+1);
    p1.html(theTime);
}
interval = setInterval( function() { changeTime(this.theTime); }, 1000 );

…

Too make it more clear, the function above updates a timer (eg. 00:00:01 -> 00:00:02) every second, and I want this.theTime to be updated with the time.

When the timer stops (which happens in another prototype function) I want to be able to see what time the timer stopped on, but as it is now this.theTime is the default value, which means that the function above doesn’t update the objects property. Instead this.theTime in the function above must be a local variable.

NOTE: setTime() is another function that exists in the same prototype function as the function above.

Answer 1

Well when you use this in some function this is referencing to the object which actually the function is. Here:

function myF() {
    this.var = 'hey';
}

You can reach var using this (myF as a constructor function):

var obj = new myF();
alert(obj.var);

Or here:

function myF2() {
    if (typeof this.var === 'undefined') {
        this.var = 0;
    } else {
        this.var += 1;
    }
    alert(this.var);
}

Here var again is a property of myF2 (which as I said is not just a function because in JavaScript functions are objects).
Each time you call myF2 this.var is going to be incremented and alerted (just in the first call it’s going to be initialized).

In the second function (anonymous function using in the second setInterval) you’re doing the same.

One solution is to make theTime global in both cases so you don’t need to use:

this.theTime

So the result can be something like this:

var theTime = 0, interval;
function changeTime() {
    theTime += 1;
    document.body.innerHTML = theTime;
    setInterval
}

interval = setInterval(changeTime, 1000 );

http://jsfiddle.net/u3EuC/