Object refference is lost in a loop? My first JS attempt, please help

[Lae.]

I can't figure this one out. n00b question no doubt, this is my first
ever JS attempt.

Here's the snippet, and here's the full deal
http://www.ualberta.ca/~koryb/first.js
http://www.ualberta.ca/~koryb/
http://www.ualberta.ca/~koryb/test.html runs it

// Runs timer loop and increments pics
function timer()
{ this.incrementSrc()
this.timerControl = setTimeout("timer()", this.counterTime)
}

// Increments the pic number, updates pic src and diplays update
function incrementSrc()
{ var aNumber = this.picNumber
aNumber++
alert(aNumber)
if (aNumber > numberOfPics)
{ aNumber = 1
}
this.newPicNumber(aNumber)
this.newSrcName(sourceGenerator(this.picNumber))
document.getElementById(this.id).src = this.srcName
}

This runs the first loop ok, but the 2nd loop I get a no properties
error for
document.getElementById(this.id).src = this.srcName Actully the whole
object isn't being reffered to anymore it seems. Why?

I can't figure this out.

Thanks for your time,
Lae.

 

[Dennis Ålund]

When you first call slotOne.timer() it's OK because then it's a call to
the member function timer of the object slotOne. But within
slot::timer() you have this:
function timer()
{ this.incrementSrc()
this.timerControl = setTimeout("timer()", this.counterTime)
}
Where you only call timer() without as if it wasn't a member function
of the class. And since you have declared timer() as a stand alone
function (and afterwards assigned it to the class) it is a perfectly
valid function call... although "this" has no meaning when the window
timer calls the function (since the function that was called is not
member of an object).

Did I make any sense?

 

[Lae.]

Sorta. I am new at this.

So I have to figure out a way to reffer back to the object and then to
the timer again.
So by I expand the loop with another fuction that maintains the
refference it should work then eh?

I'll fiddle with it and get back to ya if I need more help. lol A
night's sleep always works too. (o:

Thanks,
Lae.

 

[Dennis Ålund]

So I have to figure out a way to reffer back to the object and then to
the timer again.

Yes, you have to make a reference to the calling object in
window.setTimer()

So by I expand the loop with another fuction that maintains the
refference it should work then eh?

Yea, or maybe you can attach some object to a image DOM element:

document.getElementById("imageNo1").srcChanger = new
SourceChanger("imageNo1");
function SourceChanger(id)
{
this.imageId = id;
this.timeoutInterval = 1234;
}
SourceChanger.prototype =
{
changeSource: function()
{
...
},
startTicker: function()
{
changeSource();

window.setTimeout("document.getElementById(\""+this.imageId+"\").startTicker()",
this.timeoutInterval);
}
}


This is just something I came up with in the moment of writing... in
other words it's just one of many possible ways of solving it... this
was the first that came to my mind.

 

[Dennis Ålund]

Edit note:
There should be a call to startTicker in the constructor of
SourceChanger... didn't pay too much attention of what I was doing
there...

It aint a complete solution, but you get the idea. It's a push in some
direction if you're stuck.

 

[Dennis Ålund]

Edit note 2:
How embarrasing... another err (this is what you get for being hasty)
This
window.setTimeout("document.getElementById(\""+this.imageId+"\").startTicker()",
this.timeoutInterval);

should of course look like this
window.setTimeout("document.getElementById(\""+this.imageId+"\").srcChanger.startTicker()",
this.timeoutInterval);

But you already figured that out
Let's end this monologue with this post.

 

[Lae.]

Thanks for all the help Dennis. Lucky for me I didn't look at it
till just now.

I did this:
function timer(object)
{ this.object = object
this.object.incrementSrc()
this.object.timerControl = setTimeout("timer(this.object)",
this.object.counterTime)
}

Just passes an object into it and kept handing it back. To be honest a
lot of what you wrote above is a bit beyond me at the moment. I can
understand passing messages simply and I have a small repetiore of
stuff to work with. I will try your suggestion here and see how it
goes.

I am currently stuck with the problem of wanting to run 3 of these
timed loops at once. Is that possible? How can I get three of them
working independently? Or would I have to create them and find the
differents and then run a larger loop from an array or something like
that? That seems like it would be hard since I wanted the times to be
instantiated with a randomness.

Ideas?
Maybe I should repost this under a new topic? I dunno.

thanks though,

Kory

 

[Dennis Ålund]

It's no problem having several timers going parallell.
Although, it might give you some strange results if you pass
"this.object" in the timer. You see the timer will interpret the string
when "counterTime" is due... in other words, "this" will refer to
"window" at that time.
What you might want to do is to pass an string id that can be used to
find the target object... for example an HTML element id (to which you
have attached the object). This is going back a little to the solution
I proposed... perhaps you're working on another trail, but the idea of
passing a string id is the same.

The timer function is probably best implemented as a static function or
something, since you can't make out the instance name of the object
that hold you timer function. This will require that you pass all
necessary information as parameters...
You can make a static function in JavaScript by declaring it like this
(apply this to your timerControl function):
function MyClass() = { ... }
MyClass.myStaticFunction = function () { ... }


So, to activate several timers going parallell you just call your timer
function repeatedly with different object id.

timer(myObjectId, interval)
{
doStuff();
setTimeout("timer("+myObjectId+", "+interval+")", interval);
}