setTimeOut

[Frances Del Rio]

this code is supposed to flip imgs at intervals of one second, but it
flipps them much faster, it seems it flips them all in that first
second, the more seconds the faster it flips them, instead of the other
way around... (I mean it seems to me the more seconds I put in there the
more seconds should go by betw. flips... each photo is in a div, each
div has a z-index of 0, 1, 2, etc..)

http://www.francesdelrio.com/cassini
(pls reload a few times, my stuff loads a bit slow b/c my site is hosted
abroad, their int'l traffic is slower..)

code:

var photos = new
Array("one","two","three","four","five","six","seven","eight")
function flip() {
for (i=1; i < photos.length; i++) {
var photoDiv = eval('document.getElementById(' + "photos" + ')')
var doIt = photoDiv.style.visibility = "visible"
setTimeout("doIt",1000)
}
}

thank you.. Frances

 

[J. J. Cale]

this code is supposed to flip imgs at intervals of one second, but it
flipps them much faster, it seems it flips them all in that first
second, the more seconds the faster it flips them, instead of the other
way around... (I mean it seems to me the more seconds I put in there the
more seconds should go by betw. flips... each photo is in a div, each
div has a z-index of 0, 1, 2, etc..)

http://www.francesdelrio.com/cassini
(pls reload a few times, my stuff loads a bit slow b/c my site is hosted
abroad, their int'l traffic is slower..)

code:

var photos = new
Array("one","two","three","four","five","six","seven","eight")
function flip() {
for (i=1; i < photos.length; i++) {

will not reference the first array element

var photoDiv = eval('document.getElementById(' + "photos" + ')')

eval is unnecessary and in general shouldn't be used to return object
references as such
var photoDiv = document.getElementById(photos);

var doIt = photoDiv.style.visibility = "visible" doIt always = "visible"
setTimeout("doIt",1000)

first parameter wants a function reference or a valid expression. Further
the timeout won't work the way I think you intend since the loop doesn't
stoop for 1 second when you call setTimeout. It just keeps falling through
the loop and all your images will be shown at once. If Dr J is listening he
is an expert on this type of thing but you better explain what you're trying
to do. e.g. turn images on/off at intervals; turn cards in a series at one
second intervals.

}
}

depending on what you're doing, the use of the array and the Ids is
unnecessary. You could wrap them in a div with id="wrapper" and loop through
them using wrapper.children(i) to reference each object. I assume from your
code that you have each image in a separate div. This is not always a good
idea again depending on what you're trying to achieve. If it's positioning
you can achieve the same or better results just using the image tags or

 

[Frances Del Rio]

this code is supposed to flip imgs at intervals of one second, but it
flipps them much faster, it seems it flips them all in that first
second, the more seconds the faster it flips them, instead of the other
way around... (I mean it seems to me the more seconds I put in there the
more seconds should go by betw. flips... each photo is in a div, each
div has a z-index of 0, 1, 2, etc..)

http://www.francesdelrio.com/cassini
(pls reload a few times, my stuff loads a bit slow b/c my site is hosted
abroad, their int'l traffic is slower..)

code:

var photos = new
Array("one","two","three","four","five","six","seven","eight")
function flip() {
for (i=1; i < photos.length; i++) {

will not reference the first array element

var photoDiv = eval('document.getElementById(' + "photos" + ')')

eval is unnecessary and in general shouldn't be used to return object
references as such
var photoDiv = document.getElementById(photos);

var doIt = photoDiv.style.visibility = "visible"

doIt always = "visible"

setTimeout("doIt",1000)

first parameter wants a function reference or a valid expression. Further
the timeout won't work the way I think you intend since the loop doesn't
stoop for 1 second when you call setTimeout. It just keeps falling through
the loop and all your images will be shown at once. If Dr J is listening he
is an expert on this type of thing but you better explain what you're trying
to do. e.g. turn images on/off at intervals; turn cards in a series at one
second intervals.

}
}

depending on what you're doing,

thank you very much for yr help.. this is simply a learning exercise...
(need to learn how to implement my own loops from scratch..) I simply
want imgs to flip every 2 seconds or so for ever, that's it.... I
implemented yr code (but don't understand 'doIt always = "visible"',
wasn't sure about that line, left it out..) now cycle goes thru once
then stops.... I want it to start over when it finishes, like a slide
show that reaches the end then starts again... I know I need to call
function again once it's done, but not sure how.. called function again
right outside loop (inside function) but still went thru loop only
once.. (and then get an "out of memory" error, had never seen this..)

now am trying same w/rollovers instead of hide/show divs...

var photos = new
Array("one","two","three","four","five","six","seven","eight")
function flip() {
for (i=1; i < photos.length; i++) {
var doIt = "cassini.src = 'images/" + photos + ".jpg'"
// one.jpg, two.jpg, three.jpg, etc..
setTimeout("doIt",i*1000)
}
}

here I get NOTHING.... (I see a flicker.. like imgs flip really fast or
something..) I understand very well the concept of loops, what I have a
hard time with usu. is organizing stmts inside the loop... again, thank
you very much for yr help.. Frances

 

[Michael Winter]

[snip]

thank you very much for yr help..

^^

Please don't use abbreviations like that. Saving two keystrokes is hardly
worth the loss of readability.

[snip]

I implemented yr code (but don't understand
'doIt always = "visible"', wasn't sure about that line, left it
out..)

He was saying that in your code, 'doIt' always equalled 'visible'. The
statement in question was:

var doIt = photoDiv.style.visibility = "visible"

First, the visibility property of the photoDiv style object is assigned
'visible'. Next, doIt is assigned the value of the visibility property.
Considering that you want doIt to be a function reference for it to be of
any real use with setTimeout, the statement above is not what want.

[snip]

called function again right outside loop (inside function) but still
went thru loop only once.. (and then get an "out of memory"
error, had never seen this..)

That would be a stack overflow and a pattern called recursion. Recursion -
calling a function from within that function - can be a useful thing. For
example, nested data, such as that found in the document tree, can be
examined by calling a function recursively, passing in a different branch
on each invocation. However, recursive calls take up memory as the system
needs to remember the state of earlier function calls. This state is
stored on the stack (in most languages on the PC). If you don't set a
condition whereby recursion stops, it will keep going until you run out of
memory.

now am trying same w/rollovers instead of hide/show divs...

var photos = new
Array("one","two","three","four","five","six","seven","eight")

Define arrays with literals:

var photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

function flip() {
for (i=1; i < photos.length; i++) {

This will cause the first image to be skipped. Arrays are zero-order (they
start at index zero). Also, be sure to declare that variable, i, with the
var keyword. If you don't it will become global.

for (var i = 0; i < photos.length; i++) {

This isn't a fix; just a tip.

var doIt = "cassini.src = 'images/" + photos + ".jpg'"
// one.jpg, two.jpg, three.jpg, etc..
setTimeout("doIt",i*1000)
}
}

here I get NOTHING.... (I see a flicker.. like imgs flip really fast or
something..) I understand very well the concept of loops, what I have a
hard time with usu. is organizing stmts inside the loop... again, thank
you very much for yr help.. Frances

The flow of that function has become quite confused. When the function is
called, a loop is encountered with no code to halt it. That immediately
implies that the entire set of images will be processed. That's why you
saw all of the images flash into view with previous versions. All that
happens here is string concatenation (and assignment), and a call to
setTimeout that will do nothing useful.

var j = 0,
photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

function flip() {
document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
j = (j + 1) % photos.length;
}
// Call onload:
setInterval(flip, 1000);

This is a simple version of what you want to achieve. setInterval will
call flip approximately every second. When it does, the first statement
will change the source of the IMG element, cassini, and increment the
index variable, j. The modulus (%) ensures that the value of j stays
within the range 0 <= j < 8.

However, this code pollutes the global namespace. It also looks-up a
reference to the IMG, cassini, and the length property of the photos array
on every invocation of flip.

window.onload = function() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = function() {return 'flip()';};

setInterval(flip, 1000);
};

That's quite a transformation.

The first thing to note is the external function expression, function()
{ ... }. You can think of this just like any other function, except it
doesn't have a name. What this does is produce a new scope level. As with
all functions, the local variables declared here aren't accessible outside
of the function. This means you can name variables, that would normally be
global, anything you like and not worry about them clashing with other
variables.

Inside the function, things are much like they were last time, with two
slight differences:

1) A reference to the IMG element, cassini, has been assigned to the
variable, i. This allows it to be looked-up once only, rather than
repeatedly.
2) Similarly, the length property of the array of filenames has been
stored in n. Like the reference to cassini, it doesn't change, so why keep
looking it up?

There's a third difference, which follows after the declaration of flip.
All functions and objects have a method called toString. Whenever a string
value is required, and an object or function is given, this method is
called and string that represents that object is returned[1]. The
setInterval function, like setTimeout, can accept two types as its first
argument. A function reference, and a string. Older browsers only accept a
string. Giving the function, flip, a toString method means that browsers
can convert the argument to a form they can use. This is explained in the
FAQ notes:

<URL:http://www.jibbering.com/faq/faq_notes/misc.html#mtSetTI>

I should also briefly explain the mechanism, as a whole, that allows this
to work. When a function has returned, local variables are usually
destroyed. However, this doesn't happen with the outer function above. The
reason is the position of the inner function, flip. flip references the
local variables of the outer function, so they remain in memory; flip
forms a closure. Closures have many applications, too numerous to list
here. A detailed explanation of them is also present in the FAQ notes:

<URL:http://www.jibbering.com/faq/faq_notes/closures.html>

I hope that was understandable, or at least gives you the functionality
that you want. If you need to execute other things when the document loads
(the code above will overwrite it), change the first line of my code from

window.onload = function() {

to

function functionName() {

giving the function any name you want. You can then place the function
amongst your other onload code.

Good luck,
Mike


[1] The actual value can vary, depending on the implementation and the
type of object.

 

[Yann-Erwan Perio]

window.onload = function() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = function() {return 'flip()';};

setInterval(flip, 1000);
};

That's quite a transformation.

....and a better one as well, but with a slight mistake; the flip
function should be global if you want the toString fallback to be
executable (string argument for the setInterval methods are evaluated in
a global context).

Therefore what about replacing
function flip() {
by
flip = function() {
?


Regards,
Yep.

 

[Yann-Erwan Perio]

Michael Winter wrote:

Therefore what about replacing
function flip() {
by
flip = function() {
?

Nah, forget it, that wouldn't work - there no way to add the fallback if
using closures.

 

[Michael Winter]

On Sat, 25 Sep 2004 11:13:45 +0200, Yann-Erwan Perio

[snip]

Nah, forget it, that wouldn't work

*slaps head*

No, of course not. Stupid mistake on my part.

there no way to add the fallback if using closures.

By exposing the function, it is possible:

function initFlip() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = function() {return 'initFlip.flip()';};

initFlip.flip = flip;

setInterval(flip, 1000);
};
window.onload = initFlip;

It seems hack-ish, though. But it does work.

Thanks for pointing that out,
Mike

 

[Yann-Erwan Perio]

*slaps head*

That looked painful

By exposing the function, it is possible:

Sorry, I meant using the closure in the original construct, not with
closures in general (with which alsmost everything is possible) - using
an outer function, as you've just proposed, is indeed the best way,
since you can still take advantage of the flip closure in normal mode.

It seems hack-ish, though. But it does work.

No no no, it's not hackish, that's just how javascript can be written,
and most of the time, should be written (IMHO).


Cheers,
Yep.

 

[Michael Winter]

On Sat, 25 Sep 2004 12:15:50 +0200, Yann-Erwan Perio

[snip]

Sorry, I meant using the closure in the original construct [...]

I know, but the OP might have been confused and may not have worked out
how to reach a solution.

No no no, it's not hackish, that's just how javascript can be written,
and most of the time, should be written (IMHO).

The original just seemed cleaner. Self-contained.

Mike

 

[Yann-Erwan Perio]

The original just seemed cleaner. Self-contained.

That's certainly true, and is indeed what should be presented if the OP
doesn't know much about javascript; however the second is much more
subtile, and tackles issues not considered in the first attempt.

I was however simply raising myself against the term "hackish", which
implies trying to patch/break into an inability of the language The
use you've made of javascript wasn't therefore in my view hackish but
rather completely normal, using regular javascript-specific optimisation
techniques to achieve its goal.

Anyway, your post, by presenting the two versions and providing leads on
how to deal with the second one, was an excellent one.


Cheers,
Yep.

 

[Richard Cornford]

Yann-Erwan Perio wrote:

The original just seemed cleaner. Self-contained.

As stated, when setTimeout/Interval are using sting arguments they have
no choice but evaluate the string in the global context. So 'self
contained' isn't necessarily achievable. But, loosing the integrity of
the original anonymous function might be done in a way that made it
dependent only on another unit that was itself self contained, and
potentially re-usable.

My inclination now is to pass execution-shedding tasks off to distinct
components (that can handle these details themselves internally), but
that development came out of re-usable toString functions such as:-

var funcCallingToString = (function(){
var fncId = '__f';
var fnRfs = {};
function actualToString(){
var fId;
while(fnRfs[fncId]){
fncId = fncId + 'Q';
}
fnRfs[fncId] = this; //this - is the function object as toSting
//is called as a method of the fucntion
fId = fncId;
this.toString = function(){
return ('funcCallingToString.fr.'+fId+'()');
}
return this.toString();
}
actualToString.fr = fnRfs;
return actualToString;
})();

- where the facility to reference the function globally is created as
needed for any function with which the above is used as a toString
method. (It has the drawback of creating an object full of references to
what would be expected to be inner functions and so would inhibit
garbage collection and the destruction of closures that had done their
job. That problem could be mitigated to some extent by implementing a
finalize/destroy mechanism, but it was facilitating that (and the more
efficient removal of spent inner function references) that made me think
that scheduling should itself be a task for more (internally) elaborate
self-contained components.)

However, using it with your original code might go:-

window.onload = function() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = funcCallingToString;

setInterval(flip, 1000);
};

- and the same - toString - function would also be available to any
other functions needing the setTimeout/Interval fallback.

Richard.

 

[Frances Del Rio]

Michael Winter wrote:

[. . . .]

var photos = new
Array("one","two","three","four","five","six","seven","eight")

Define arrays with literals:

var photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

please, what is difference between these two ways of declaring arrays??

a) mine: var photos = new
Array("one","two","three","four","five","six","seven","eight")

yours: var photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

thank you very much for yr help.. Frances

 

[Frances Del Rio]

Michael Winter wrote:

[. . . . . ]

var j = 0,
photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

function flip() {
document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
j = (j + 1) % photos.length;
}
// Call onload:
setInterval(flip, 1000);

This is a simple version of what you want to achieve. setInterval will
call flip approximately every second. When it does, the first statement
will change the source of the IMG element, cassini, and increment the
index variable, j. The modulus (%) ensures that the value of j stays
within the range 0 <= j < 8.

However, this code pollutes the global namespace. It also looks-up a
reference to the IMG, cassini, and the length property of the photos
array on every invocation of flip.

window.onload = function() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = function() {return 'flip()';};

setInterval(flip, 1000);
};

That's quite a transformation.

The first thing to note is the external function expression, function()
{ ... }. You can think of this just like any other function, except it
doesn't have a name. What this does is produce a new scope level. As
with all functions, the local variables declared here aren't accessible
outside of the function. This means you can name variables, that would
normally be global, anything you like and not worry about them clashing
with other variables.

Inside the function, things are much like they were last time, with two
slight differences:

1) A reference to the IMG element, cassini, has been assigned to the
variable, i. This allows it to be looked-up once only, rather than
repeatedly.
2) Similarly, the length property of the array of filenames has been
stored in n. Like the reference to cassini, it doesn't change, so why
keep looking it up?

There's a third difference, which follows after the declaration of
flip. All functions and objects have a method called toString. Whenever
a string value is required, and an object or function is given, this
method is called and string that represents that object is returned[1].
The setInterval function, like setTimeout, can accept two types as its
first argument. A function reference, and a string. Older browsers only
accept a string. Giving the function, flip, a toString method means
that browsers can convert the argument to a form they can use.

Michael, thank you very very much for all your help.. I have just spent
about an hour studying and dissecting your post.. and got the two
sripts you gave me to work...

http://www.francesdelrio.com/cassini/index_rolls.html
http://www.francesdelrio.com/cassini/index_rolls_better-script.html

(the first one -- the not-so-good script that u said...) takes longer to
load.. (again, as I mentioned in an earlier post, my stuff loads a bit
slow anyway b/c I'm being hosted abroad (in Chile..) by a friend, he's
hosting me for free, and their int'l traffic is slower... these two
scripts work perfectly locally, start running immediately; but on-line
imgs take a bit to load..)

I have two small questions:

1) is this
window.onload = function()

the same as calling function in onload event handler in body tag?

2) you have commas after the var declarations, I had never seen that..

var i = document.images['cassini'],
j = 0,

of course have larger questions too.. still don't understand everything
about this script, but at least now I have one that works so have
something to study this with.. and re-digest everything you wrote..
again, thank you very much.. Frances

 

[Frances Del Rio]

ok Michael, made images smaller, now they should load faster..

http://www.francesdelrio.com/cassini/index_rolls.html
http://www.francesdelrio.com/cassini/index_rolls_better-script.html

again, many many thanks for your help... Frances

Michael Winter wrote:

[. . . . . ]

var j = 0,
photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

function flip() {
document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
j = (j + 1) % photos.length;
}
// Call onload:
setInterval(flip, 1000);

This is a simple version of what you want to achieve. setInterval
will call flip approximately every second. When it does, the first
statement will change the source of the IMG element, cassini, and
increment the index variable, j. The modulus (%) ensures that the
value of j stays within the range 0 <= j < 8.

However, this code pollutes the global namespace. It also looks-up a
reference to the IMG, cassini, and the length property of the photos
array on every invocation of flip.

window.onload = function() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = function() {return 'flip()';};

setInterval(flip, 1000);
};

That's quite a transformation.

The first thing to note is the external function expression,
function() { ... }. You can think of this just like any other
function, except it doesn't have a name. What this does is produce a
new scope level. As with all functions, the local variables declared
here aren't accessible outside of the function. This means you can
name variables, that would normally be global, anything you like and
not worry about them clashing with other variables.

Inside the function, things are much like they were last time, with
two slight differences:

1) A reference to the IMG element, cassini, has been assigned to the
variable, i. This allows it to be looked-up once only, rather than
repeatedly.
2) Similarly, the length property of the array of filenames has been
stored in n. Like the reference to cassini, it doesn't change, so why
keep looking it up?

There's a third difference, which follows after the declaration of
flip. All functions and objects have a method called toString.
Whenever a string value is required, and an object or function is
given, this method is called and string that represents that object
is returned[1]. The setInterval function, like setTimeout, can accept
two types as its first argument. A function reference, and a string.
Older browsers only accept a string. Giving the function, flip, a
toString method means that browsers can convert the argument to a
form they can use.

Michael, thank you very very much for all your help.. I have just spent
about an hour studying and dissecting your post.. and got the two
sripts you gave me to work...

http://www.francesdelrio.com/cassini/index_rolls.html
http://www.francesdelrio.com/cassini/index_rolls_better-script.html

(the first one -- the not-so-good script that u said...) takes longer to
load.. (again, as I mentioned in an earlier post, my stuff loads a bit
slow anyway b/c I'm being hosted abroad (in Chile..) by a friend, he's
hosting me for free, and their int'l traffic is slower... these two
scripts work perfectly locally, start running immediately; but on-line
imgs take a bit to load..)

I have two small questions:

1) is this
window.onload = function()

the same as calling function in onload event handler in body tag?

2) you have commas after the var declarations, I had never seen that..

var i = document.images['cassini'],
j = 0,

of course have larger questions too.. still don't understand everything
about this script, but at least now I have one that works so have
something to study this with.. and re-digest everything you wrote..
again, thank you very much.. Frances

 

[Frances Del Rio]

Michael Winter wrote:

var j = 0,
photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

function flip() {
document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
j = (j + 1) % photos.length;
}
// Call onload:
setInterval(flip, 1000);

This is a simple version of what you want to achieve. setInterval will
call flip approximately every second. When it does, the first statement
will change the source of the IMG element, cassini, and increment the
index variable, j. The modulus (%) ensures that the value of j stays
within the range 0 <= j < 8.

However, this code pollutes the global namespace. It also looks-up a
reference to the IMG, cassini, and the length property of the photos
array on every invocation of flip.

window.onload = function() {
var i = document.images['cassini'],
j = 0,
p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
'eight'],
n = p.length;

function flip() {
i.src = 'images/' + p[j] + '.jpg';
j = (j + 1) % n;
}
flip.toString = function() {return 'flip()';};

setInterval(flip, 1000);
};

I forgot to mention.. I started this as an exercise to learn how to
implement loops w/setTimeOuts.. and yet both solutions you gave me have
no loops!! thank you again... Frances

 

[Michael Winter]

I'll try to answer all of your questions in this one post.

please, what is difference between these two ways of declaring
arrays??
a) mine: var photos = new Array("one","two","three","four","five",
"six","seven","eight")
yours: var photos = ['one', 'two', 'three', 'four', 'five',
'six', 'seven', 'eight'];

As far as the end result is concerned, none. Both produce arrays
initialised with those values. However, it's generally considered good
form to specify initialised values and objects with literals, rather than
anything else. If you want to create an array with a certain number of
uninitialised elements, then use the Array constructor with an argument
specifying that amount.

[...] these two scripts work perfectly locally, start running
immediately; but on-line imgs take a bit to load..)

They won't start running until the document has loaded, which means that
any images must have been loaded, too.

1) is this
window.onload = function()

the same as calling function in onload event handler in body tag?

If you changed that function expression to just a function, yes.

function myFunction() {
// ...
}

// Don't add parentheses!
window.onload = myFunction;

is the same as

2) you have commas after the var declarations, I had never seen
that..

var i = document.images['cassini'],
j = 0,

It's simply a way of declaring several variables with one var statement.
It's exactly the same as:

var i = document.images['cassini'];
var j = 0;
// etc.

I just prefer the former.

It can also be used with for statements:

for(var i = 0, n = obj.length; i < n; ++i) {

a pattern I often use.

I forgot to mention.. I started this as an exercise to learn how to
implement loops w/setTimeOuts.. and yet both solutions you gave me have
no loops!! thank you again... Frances

"Looping" with setTimeout, in this sense, doesn't actually involve any
kind of loop construct (for, do..while, etc) at all. It involves
setTimeout calling a function, which itself uses setTimeout to call the
same function. An example should make that clear:

function myFunction() {
// Do something periodically

setTimeout(myFunction, 2000);
}
// Start the "loop" going
myFunction();

Once myFunction is called once, the setTimeout call placed within it calls
myFunction again, two seconds later. This repeats ad infinitum.

However, a more reliable two second period can be achieved using
setInterval.

function myFunction() {
// Do something periodically
}
setInterval(myFunction, 2000);

This is because the delay with the setTimeout "loop" would actually be,
2000ms plus the time to execute the preceeding code. On a fast computer
executing little code, that might still be 2000ms, but a larger function
on a slower computer might be more obtrusive.

Hope that helps,
Mike

 

[Dr John Stockton]

JRS: In article <opsezjtq06x13kvk@atlantis>, dated Mon, 27 Sep 2004
12:30:36, seen in Michael Winter <M.Winter@bl
ueyonder.co.invalid> posted :

"Looping" with setTimeout, in this sense, doesn't actually involve any
kind of loop construct (for, do..while, etc) at all. It involves
setTimeout calling a function, which itself uses setTimeout to call the
same function. An example should make that clear:

function myFunction() {
// Do something periodically

setTimeout(myFunction, 2000);
}
// Start the "loop" going
myFunction();

The call to setTimeout can be placed at the beginning of myFunction. I
do not know what happens if the first myFunction has not completed
before the next is called.

Once myFunction is called once, the setTimeout call placed within it calls
myFunction again, two seconds later. This repeats ad infinitum.

However, a more reliable two second period can be achieved using
setInterval.

function myFunction() {
// Do something periodically
}
setInterval(myFunction, 2000);

This is because the delay with the setTimeout "loop" would actually be,
2000ms plus the time to execute the preceeding code. On a fast computer
executing little code, that might still be 2000ms, but a larger function
on a slower computer might be more obtrusive.

One must also consider the mechanism whereby Timeout or Interval is
implemented. In Win98, I find that neither is exact on the long-term
average.

See <URL:http://www.merlyn.demon.co.uk/js-date0.htm#TaI>, using a
variety of computer types, operating systems and browsers - and someone
let me know what happens!

 

[Thomas 'PointedEars' Lahn]

var photos = new
Array("one","two","three","four","five","six","seven","eight")

Define arrays with literals:

var photos = ['one', 'two', 'three', 'four', 'five', 'six',
'seven', 'eight'];

please, what is difference between these two ways of declaring arrays??

The second one (the Array initializer) requires at least JavaScript 1.1
and/or an ECMAScript 3 compliant language implementation. (The different
quote character does not matter.)


HTH

PointedEars