slowing down a loop

**TheKeith** · Jul 20 '05, 11:22 AM

Re: slowing down a loop

"TheKeith" <no@spam.com> wrote in message
news:6cadnZsur9 jBGQGiRVn-sg@giganews.com ...[color=blue]
> I'm writing a script with a while loop in it. How can I get it to go[/color]
slower[color=blue]
> so that it doesn't appear to happen all at once--so that it looks
> animated--basically. I tried the setTimeout(500) in the last line of the
> loop, but that just messes things up. Any help would be[/color]
appreciated--thanks.

here is what I'm doing:

<html>
<head>
<script type="text/JavaScript">
function growbluebox(wid thto,heightto) {

var idofbluebox = document.getEle mentById("blueb ox")
var idofbluebox = document.getEle mentById("blueb ox")
var blueboxwidthnum = parseInt(idofbl uebox.style.wid th)
var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght)

while (blueboxwidthnu m < widthto) {
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
idofbluebox.sty le.width = blueboxwidthnum + "px";
}

}
</script>
</head>
<body>
<a href="#" onClick="growbl uebox(500,400)" >grow by 200 wide and 200 high</a>
<div id="bluebox" style="position :absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>

I'm trying to have the box grow slowly so it looks animated. I didn't get
around to the height part yet. BTW, is there a way I can do the height at
the same time as the width? Thanks.

**Vicomte De Valmont** · Jul 20 '05, 11:23 AM

Re: slowing down a loop

ciao

you cannot slow down a loop: loops are meant to be the faster the better.
use setInterval : see on a manual the documentation for it, should be under
the window object. I mean that now a full description of how setInterval
works printed right here would require maybe 15 minutes. I hope having
pointed to you the method will suffice.
Loops cannot be slow down, not in javaScript and not in other languages.
Also functions like sleep that a few languages have are not meant to make
loops slow, but to postpone the execution of blocks of codes - but that's
server side, like a flush() method say.
ciao
Alberto Vallini
ciao
uhm why not using both? I mean an old way of doing soemthing doesn't age:
the document.images collection is an useful tool: it grants you the option
to loop throughout ALL the available images with an array already arranged.
otherwise you'd have to arrange it yourself, either patching up a collection
by repeatedly calling in document.getEle mentById('image 101') or by
document.getEle mentsByTagName( "A")
the former is highly unpractical, the second is much slower than just using
an object which is already within the built in arrays of a loaded document.
It is not an issue of purist vs moderns: it is that I'm suggesting: use
both - dismissing the name just because they ADDED the id feature doesn't
mean you have to give up the possibility to scan all your images with an
alrerady available collection. Again, name= is NOT deprecated.
Of course, feel free to dismiss my suggestion, but please: it is NOT a
suggestion of "old school" vs "new school": it is the suggestion that
everybody with javascript expereince would be likely to lend to you.
Of course, eventually do as you prefer. yet using two weapons instead than
one is better - we have not given up the rifle because we have the scuds.
ciao

Alberto

http://www.unitedscripters.com/

"TheKeith" <no@spam.com> ha scritto nel messaggio
news:X9ydnegIgo cSDQGiRVn-gA@giganews.com ...[color=blue]
>
> "TheKeith" <no@spam.com> wrote in message
> news:6cadnZsur9 jBGQGiRVn-sg@giganews.com ...[color=green]
> > I'm writing a script with a while loop in it. How can I get it to go[/color]
> slower[color=green]
> > so that it doesn't appear to happen all at once--so that it looks
> > animated--basically. I tried the setTimeout(500) in the last line of the
> > loop, but that just messes things up. Any help would be[/color]
> appreciated--thanks.
>
>
> here is what I'm doing:
>
> <html>
> <head>
> <script type="text/JavaScript">
> function growbluebox(wid thto,heightto) {
>
> var idofbluebox = document.getEle mentById("blueb ox")
> var idofbluebox = document.getEle mentById("blueb ox")
> var blueboxwidthnum = parseInt(idofbl uebox.style.wid th)
> var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght)
>
> while (blueboxwidthnu m < widthto) {
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> idofbluebox.sty le.width = blueboxwidthnum + "px";
> }
>
> }
> </script>
> </head>
> <body>
> <a href="#" onClick="growbl uebox(500,400)" >grow by 200 wide and 200[/color]
high</a>[color=blue]
> <div id="bluebox" style="position :absolute; left:189px; top:96px;
> width:228px; height:129px; z-index:1; background-color: #99CCFF;
> layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> </body>
> </html>
>
> I'm trying to have the box grow slowly so it looks animated. I didn't get
> around to the height part yet. BTW, is there a way I can do the height at
> the same time as the width? Thanks.
>
>[/color]

**Vicomte De Valmont** · Jul 20 '05, 11:23 AM

Re: slowing down a loop

sorry for the messed up message, it included a second half which was a copy
of a message sent to another user - only the first half was for your
question - mistakes that can ahppen with 4 wiondows open!
ciao

**TheKeith** · Jul 20 '05, 11:23 AM

Re: slowing down a loop

"Vicomte De Valmont" <NOSPAM@hotmail .com> wrote in message
news:bni8r8$iq1 $1@lacerta.tisc alinet.it...[color=blue]
> sorry for the messed up message, it included a second half which was a[/color]
copy[color=blue]
> of a message sent to another user - only the first half was for your
> question - mistakes that can ahppen with 4 wiondows open!
> ciao[/color]

I appreciate the help. BTW, the stuff about the images was meant for me
anyway--I'm the one who posted that message:) Is there a better way to have
the box grow gradually if not with a loop? thanks.

**Vicomte De Valmont** · Jul 20 '05, 11:23 AM

Re: slowing down a loop

ciao
yes in javascript you can do that by using setInterval
Check on a manual the explanations about it, or online any javascript manual
printed on the web will certainly include a reference to setInterval:
by and large if you have a function that does something:
var foo=setInterval ("funcname()",5 00);
that would execute funcname() at a rhythm of half a second, continuously.
You stop it by clearInterval(f oo)

If you have problems with passing arguments, you cannot pass arguments
inside setInterval like:
setInterval("fu ncname(arg1, arg2)", 500); //<-- wrong!
you have to deifine your arguments like global variables, that's the only
scope a setInterval would safely resepct on all browsers. Of course you
didn't ask specifications on this, but I was jyust trying to anticipate a
common question, you see, in case you use setInterval
Forget slowing down the loop, it cannot be done in any way, the only thiung
that "slows down" a loop is the amount of code the loop includes, and yet
that is still darn fast even if it is a lot as you know
ciao
Alberto

http://www.unitedscripters.com/

"TheKeith" <no@spam.com> ha scritto nel messaggio
news:XOidnQBe9d ZFOgGiRVn-hQ@giganews.com ...[color=blue]
>
> "Vicomte De Valmont" <NOSPAM@hotmail .com> wrote in message
> news:bni8r8$iq1 $1@lacerta.tisc alinet.it...[color=green]
> > sorry for the messed up message, it included a second half which was a[/color]
> copy[color=green]
> > of a message sent to another user - only the first half was for your
> > question - mistakes that can ahppen with 4 wiondows open!
> > ciao[/color]
>
> I appreciate the help. BTW, the stuff about the images was meant for me
> anyway--I'm the one who posted that message:) Is there a better way to[/color]
have[color=blue]
> the box grow gradually if not with a loop? thanks.
>
>[/color]

**Albert Wagner** · Jul 20 '05, 11:23 AM

Re: slowing down a loop

On Sun, 26 Oct 2003 22:27:13 -0500
"TheKeith" <no@spam.com> wrote:
[color=blue]
>
> "TheKeith" <no@spam.com> wrote in message
> news:6cadnZsur9 jBGQGiRVn-sg@giganews.com ...[color=green]
> > I'm writing a script with a while loop in it. How can I get it to go[/color]
> slower[color=green]
> > so that it doesn't appear to happen all at once--so that it looks
> > animated--basically. I tried the setTimeout(500) in the last line of
> > the loop, but that just messes things up. Any help would be[/color]
> appreciated--thanks.[/color]
<snip>[color=blue]
> I'm trying to have the box grow slowly so it looks animated. I didn't
> get around to the height part yet. BTW, is there a way I can do the
> height at the same time as the width? Thanks.[/color]

It's best to think of setInterval as a kind of loop that is interrupt
driven. The body you want executed every x ms should be in the callback
method for the clock. FWIW, I have included code that works for me
below. YMMV.

<html>
<head>
<script type="text/JavaScript">

function growbluebox(wid thto,heightto) {
onClockTick = function() {
if(blueboxwidth num < widthto) {
// width
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
idofbluebox.sty le.width = blueboxwidthnum + "px";
// height
blueboxheightnu m = parseInt(idofbl uebox.style.hei ght) + 1;
idofbluebox.sty le.height = blueboxheightnu m + 'px';
}else{
clearInterval(i nterval_ID);
};
};

var idofbluebox = document.getEle mentById("blueb ox")
var blueboxwidthnum = parseInt(idofbl uebox.style.wid th)
var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght)
var interval_ID = setInterval(onC lockTick, 100);

};
/*
while (blueboxwidthnu m < widthto) {
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
idofbluebox.sty le.width = blueboxwidthnum + "px";
}
}
*/
</script>
</head>
<body>
<a href="#" onClick="growbl uebox(500,400)" >grow by 200 wide and 200
high</a>
<div id="bluebox" style="position :absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

**TheKeith** · Jul 20 '05, 11:25 AM

Re: slowing down a loop

"Albert Wagner" <alwagner@tcac. net> wrote in message
news:2003102711 0328.4e32a352.a lwagner@tcac.ne t...[color=blue]
> On Sun, 26 Oct 2003 22:27:13 -0500
> "TheKeith" <no@spam.com> wrote:
>[color=green]
> >
> > "TheKeith" <no@spam.com> wrote in message
> > news:6cadnZsur9 jBGQGiRVn-sg@giganews.com ...[color=darkred]
> > > I'm writing a script with a while loop in it. How can I get it to go[/color]
> > slower[color=darkred]
> > > so that it doesn't appear to happen all at once--so that it looks
> > > animated--basically. I tried the setTimeout(500) in the last line of
> > > the loop, but that just messes things up. Any help would be[/color]
> > appreciated--thanks.[/color]
> <snip>[color=green]
> > I'm trying to have the box grow slowly so it looks animated. I didn't
> > get around to the height part yet. BTW, is there a way I can do the
> > height at the same time as the width? Thanks.[/color]
>
> It's best to think of setInterval as a kind of loop that is interrupt
> driven. The body you want executed every x ms should be in the callback
> method for the clock. FWIW, I have included code that works for me
> below. YMMV.
>
> <html>
> <head>
> <script type="text/JavaScript">
>
> function growbluebox(wid thto,heightto) {
> onClockTick = function() {
> if(blueboxwidth num < widthto) {
> // width
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> idofbluebox.sty le.width = blueboxwidthnum + "px";
> // height
> blueboxheightnu m = parseInt(idofbl uebox.style.hei ght) + 1;
> idofbluebox.sty le.height = blueboxheightnu m + 'px';
> }else{
> clearInterval(i nterval_ID);
> };
> };
>
> var idofbluebox = document.getEle mentById("blueb ox")
> var blueboxwidthnum = parseInt(idofbl uebox.style.wid th)
> var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght)
> var interval_ID = setInterval(onC lockTick, 100);
>
>
> };
> /*
> while (blueboxwidthnu m < widthto) {
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> idofbluebox.sty le.width = blueboxwidthnum + "px";
> }
> }
> */
> </script>
> </head>
> <body>
> <a href="#" onClick="growbl uebox(500,400)" >grow by 200 wide and 200
> high</a>
> <div id="bluebox" style="position :absolute; left:189px; top:96px;
> width:228px; height:129px; z-index:1; background-color: #99CCFF;
> layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> </body>
> </html>[/color]

I appreciate the help--thanks. I can't get it to work though. Here is what I
put:

<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
function growbluebox(wid thto,heightto) {

var idofbluebox = document.getEle mentById("blueb ox");
var blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
var interval_ID = setInterval(onC lockTick, 100);

onClockTick = function() {
if (blueboxwidthnu m < widthto) {
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
idofbluebox.sty le.width = blueboxwidthnum + "px";
setTimeout("gro wbluebox()",500 );
}
}
else {
clearInterval(i nterval_ID);
}
}
</script>
</head>
<body>
<a href="#" onClick="growbl uebox(500,400)" >grow to 500 wide and 400 high</a>
<div id="bluebox" style="position :absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>

Is there anything wrong there? Thanks.

**TheKeith** · Jul 20 '05, 11:25 AM

Re: slowing down a loop

"TheKeith" <no@spam.com> wrote in message
news:2eudnXleRv bjYQOiRVn-vQ@giganews.com ...[color=blue]
> "Albert Wagner" <alwagner@tcac. net> wrote in message
> news:2003102711 0328.4e32a352.a lwagner@tcac.ne t...[color=green]
> > On Sun, 26 Oct 2003 22:27:13 -0500
> > "TheKeith" <no@spam.com> wrote:
> >[color=darkred]
> > >
> > > "TheKeith" <no@spam.com> wrote in message
> > > news:6cadnZsur9 jBGQGiRVn-sg@giganews.com ...
> > > > I'm writing a script with a while loop in it. How can I get it to go
> > > slower
> > > > so that it doesn't appear to happen all at once--so that it looks
> > > > animated--basically. I tried the setTimeout(500) in the last line of
> > > > the loop, but that just messes things up. Any help would be
> > > appreciated--thanks.[/color]
> > <snip>[color=darkred]
> > > I'm trying to have the box grow slowly so it looks animated. I didn't
> > > get around to the height part yet. BTW, is there a way I can do the
> > > height at the same time as the width? Thanks.[/color]
> >
> > It's best to think of setInterval as a kind of loop that is interrupt
> > driven. The body you want executed every x ms should be in the callback
> > method for the clock. FWIW, I have included code that works for me
> > below. YMMV.
> >
> > <html>
> > <head>
> > <script type="text/JavaScript">
> >
> > function growbluebox(wid thto,heightto) {
> > onClockTick = function() {
> > if(blueboxwidth num < widthto) {
> > // width
> > blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> > idofbluebox.sty le.width = blueboxwidthnum + "px";
> > // height
> > blueboxheightnu m = parseInt(idofbl uebox.style.hei ght) + 1;
> > idofbluebox.sty le.height = blueboxheightnu m + 'px';
> > }else{
> > clearInterval(i nterval_ID);
> > };
> > };
> >
> > var idofbluebox = document.getEle mentById("blueb ox")
> > var blueboxwidthnum = parseInt(idofbl uebox.style.wid th)
> > var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght)
> > var interval_ID = setInterval(onC lockTick, 100);
> >
> >
> > };
> > /*
> > while (blueboxwidthnu m < widthto) {
> > blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> > idofbluebox.sty le.width = blueboxwidthnum + "px";
> > }
> > }
> > */
> > </script>
> > </head>
> > <body>
> > <a href="#" onClick="growbl uebox(500,400)" >grow by 200 wide and 200
> > high</a>
> > <div id="bluebox" style="position :absolute; left:189px; top:96px;
> > width:228px; height:129px; z-index:1; background-color: #99CCFF;
> > layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> > </body>
> > </html>[/color]
>
>
>
>
> I appreciate the help--thanks. I can't get it to work though. Here is what[/color]
I[color=blue]
> put:
>
>
> <html>
> <head>
> <title>Untitl ed Document</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <script type="text/JavaScript">
> function growbluebox(wid thto,heightto) {
>
> var idofbluebox = document.getEle mentById("blueb ox");
> var blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
> var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
> var interval_ID = setInterval(onC lockTick, 100);
>
> onClockTick = function() {
> if (blueboxwidthnu m < widthto) {
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> idofbluebox.sty le.width = blueboxwidthnum + "px";
> setTimeout("gro wbluebox()",500 );
> }
> }
> else {
> clearInterval(i nterval_ID);
> }
> }
> </script>
> </head>
> <body>
> <a href="#" onClick="growbl uebox(500,400)" >grow to 500 wide and 400[/color]
high</a>[color=blue]
> <div id="bluebox" style="position :absolute; left:189px; top:96px;
> width:228px; height:129px; z-index:1; background-color: #99CCFF;
> layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> </body>
> </html>
>
> Is there anything wrong there? Thanks.[/color]

I noticed the bad placement of the closing bracket--it still doesn't work
though.

**Albert Wagner** · Jul 20 '05, 11:25 AM

Re: slowing down a loop

On Tue, 28 Oct 2003 18:32:19 -0500
"TheKeith" <no@spam.com> wrote:
<snip>[color=blue]
> I appreciate the help--thanks. I can't get it to work though. Here is
> what I put:
>
>
> <html>
> <head>
> <title>Untitl ed Document</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1"><script type="text/JavaScript">
> function growbluebox(wid thto,heightto) {
>
> var idofbluebox = document.getEle mentById("blueb ox");
> var blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
> var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
> var interval_ID = setInterval(onC lockTick, 100);
>
> onClockTick = function() {
> if (blueboxwidthnu m < widthto) {
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> idofbluebox.sty le.width = blueboxwidthnum + "px";
> setTimeout("gro wbluebox()",500 );[/color]

This should be 'setInterval' rather than 'setTimeout'.
[color=blue]
> }
> }
> else {
> clearInterval(i nterval_ID);
> }
> }
> </script>
> </head>
> <body>
> <a href="#" onClick="growbl uebox(500,400)" >grow to 500 wide and 400
> high</a><div id="bluebox" style="position :absolute; left:189px;
> top:96px; width:228px; height:129px; z-index:1; background-color:
> #99CCFF;
> layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> </body>
> </html>
>
> Is there anything wrong there? Thanks.
>
>[/color]

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

**Albert Wagner** · Jul 20 '05, 11:25 AM

Re: slowing down a loop

On Tue, 28 Oct 2003 19:31:06 -0600
Albert Wagner <alwagner@tcac. net> wrote:

Sorry, I just scanned your post and didn't read it. My previous post was
wrong.
[color=blue]
> On Tue, 28 Oct 2003 18:32:19 -0500
> "TheKeith" <no@spam.com> wrote:
> <snip>[color=green]
> > I appreciate the help--thanks. I can't get it to work though. Here
> > is what I put:[/color][/color]

What is wrong with the code I posted? It's unclear whether my code
didn't run in your environment or your modified code still doesn't run.
You code below doesn't run because:

(1) You placed the onClockTick function below, rather than above the
setInterval statement, so that onClockTick is undefined at the time the
setInterval statement is executed.

(2) You placed a setTimeout statement within the onClockTick function.
This causes an infinite recursion.

(3) You had misplaced '}'s.

When I corrected the above two items, your code ran in my environment.
Also, always use a document header. What browser are you testing in? I
run on Linux with Opera 7.21 and Netscape 7.1. I know nothing about IE.

setInterval(fun ctionName, interval) starts a timer running that will
continuously call functionName every interval milliseconds until stopped
with the clearInterval function. The program does not halt at the
setInterval, but continues immediately with the following code.

setTimer(functi onName, interval) starts a timer running that will, at
the end of the interval, call functionName ONCE. setTimer, like
setInterval, does not stop to wait on the timer, but continues
immediately with the following code.

I hope that helps.

[color=blue][color=green]
> >
> >[/color][/color]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
[color=blue][color=green]
> > <html>
> > <head>
> > <title>Untitl ed Document</title>
> > <meta http-equiv="Content-Type" content="text/html;
> > charset=iso-8859-1"><script type="text/JavaScript">
> > function growbluebox(wid thto,heightto) {
> >
> > var idofbluebox = document.getEle mentById("blueb ox");
> > var blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
> > var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
> > var interval_ID = setInterval(onC lockTick, 100);
> >
> > onClockTick = function() {
> > if (blueboxwidthnu m < widthto) {
> > blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 1;
> > idofbluebox.sty le.width = blueboxwidthnum + "px";
> > setTimeout("gro wbluebox()",500 );[/color][/color]

Why was a setTimeout inserted here?
[color=blue][color=green]
> > }
> > }
> > else {
> > clearInterval(i nterval_ID);
> > }
> > }
> > </script>
> > </head>
> > <body>
> > <a href="#" onClick="growbl uebox(500,400)" >grow to 500 wide and 400
> > high</a><div id="bluebox" style="position :absolute; left:189px;
> > top:96px; width:228px; height:129px; z-index:1; background-color:
> > #99CCFF;
> > layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> > </body>
> > </html>
> >
> > Is there anything wrong there? Thanks.
> >
> >[/color]
>
>
> --
> Life is an offensive, directed against the repetitious mechanism of
> the Universe.
> --Alfred North Whitehead (1861-1947)[/color]

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

**TheKeith** · Jul 20 '05, 11:26 AM

Re: slowing down a loop

> What is wrong with the code I posted? It's unclear whether my code[color=blue]
> didn't run in your environment or your modified code still doesn't run.
> You code below doesn't run because:
>
> (1) You placed the onClockTick function below, rather than above the
> setInterval statement, so that onClockTick is undefined at the time the
> setInterval statement is executed.
>
> (2) You placed a setTimeout statement within the onClockTick function.
> This causes an infinite recursion.
>
> (3) You had misplaced '}'s.
>
> When I corrected the above two items, your code ran in my environment.
> Also, always use a document header. What browser are you testing in? I
> run on Linux with Opera 7.21 and Netscape 7.1. I know nothing about IE.
>
> setInterval(fun ctionName, interval) starts a timer running that will
> continuously call functionName every interval milliseconds until stopped
> with the clearInterval function. The program does not halt at the
> setInterval, but continues immediately with the following code.
>
> setTimer(functi onName, interval) starts a timer running that will, at
> the end of the interval, call functionName ONCE. setTimer, like
> setInterval, does not stop to wait on the timer, but continues
> immediately with the following code.
>
> I hope that helps.[/color]

Thanks I modified your stuff a little so that it made more sense to me and
everything is working fine. Here is what I put:

<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
function growbluebox(wid thto,heightto) {
var idofbluebox = document.getEle mentById("blueb ox");
var blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);

setInterval(twe en, 1);

function tween() {
if (blueboxwidthnu m < widthto) {
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 10;
idofbluebox.sty le.width = blueboxwidthnum + "px";
}
}
}
</script>
</head>
<body>
<a href="#" onClick="growbl uebox(500,400)" >grow by 500 wide and 400 high</a>
<div id="bluebox" style="position :absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>

Basically, I think the part that threw me off from the beginning was that I
didn't realize that if you use the setInterval or setTimeout methods, you
needed to place a blank function within the outer-most function in order to
make it work. I do have one other question: Do I have to use clearInterval
in my case, since the function being called by "setInterva l" contains only a
conditional? Thanks.

**Albert Wagner** · Jul 20 '05, 11:27 AM

Re: slowing down a loop

On Wed, 29 Oct 2003 17:20:19 -0500
"TheKeith" <no@spam.com> wrote:

<snip>[color=blue]
>
> Thanks I modified your stuff a little so that it made more sense to me
> and everything is working fine. Here is what I put:[/color]
<snip>[color=blue]
>
> Basically, I think the part that threw me off from the beginning was
> that I didn't realize that if you use the setInterval or setTimeout
> methods, you needed to place a blank function within the outer-most
> function in order to make it work.[/color]

I don't know what you mean by this, but I'm glad it works for you.
[color=blue]
> I do have one other question: Do I have to use clearInterval
> in my case, since the function being called by "setInterva l" contains
> only a conditional? Thanks.[/color]

Depends. The interval timer is still running and calling the tween
function. If you don't mind the loss of processing cycles while your
page is up, then I guess not. It's neater though.

It just occured to me that the tween function may be what you refer to
as a "blank" function. It's just an inner function. I use them a lot,
especially in object constructors, because it simplifies accessing the
parent's variables. It's a habit that may have confused you. You could
just as easily have placed it outside, as long as it has access to the
needed variables:

<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
var idofbluebox;
var blueboxwidthnum ;
var blueboxheightnu m;
var widthLimit, heightLimit;

function growbluebox(wid thto,heightto) {
idofbluebox = document.getEle mentById("blueb ox");
blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
widthLimit = widthto;
heightLimit = heightto;
setInterval(twe en, 1);
}

function tween() {
if (blueboxwidthnu m < widthLimit) {
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 10;
idofbluebox.sty le.width = blueboxwidthnum + "px";
}
}
</script>
</head>
<body>
<a href="#" onClick="growbl uebox(500,400)" >grow by 500 wide and 400
high</a>
<div id="bluebox" style="position :absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

**TheKeith** · Jul 20 '05, 11:27 AM

Re: slowing down a loop

"Albert Wagner" <alwagner@tcac. net> wrote in message
news:2003102919 3736.065d9f29.a lwagner@tcac.ne t...[color=blue]
> On Wed, 29 Oct 2003 17:20:19 -0500
> "TheKeith" <no@spam.com> wrote:
>
> <snip>[color=green]
> >
> > Thanks I modified your stuff a little so that it made more sense to me
> > and everything is working fine. Here is what I put:[/color]
> <snip>[color=green]
> >
> > Basically, I think the part that threw me off from the beginning was
> > that I didn't realize that if you use the setInterval or setTimeout
> > methods, you needed to place a blank function within the outer-most
> > function in order to make it work.[/color]
>
> I don't know what you mean by this, but I'm glad it works for you.
>[color=green]
> > I do have one other question: Do I have to use clearInterval
> > in my case, since the function being called by "setInterva l" contains
> > only a conditional? Thanks.[/color]
>
> Depends. The interval timer is still running and calling the tween
> function. If you don't mind the loss of processing cycles while your
> page is up, then I guess not. It's neater though.[/color]

I do mind the loss of processing cycles. Is there some kind of software I
can use to tell me if a script is still running even if nothing appears to
be happening? I just added a clearInterval, like this:
----------------------------------------------------------------------------
-----------------

<script type="text/JavaScript">
function growbluebox(wid thto,heightto) {
var idofbluebox = document.getEle mentById("blueb ox");
var blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
var blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
var tweenspeed = setInterval(twe en, 1);

function tween() {
if (blueboxwidthnu m < widthto) {
blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 10;
idofbluebox.sty le.width = blueboxwidthnum + "px";
blueboxposleft = parseInt(idofbl uebox.style.lef t) - 5;
idofbluebox.sty le.left = blueboxposleft + "px";
}
if (blueboxheightn um < heightto) {
blueboxheightnu m = parseInt(idofbl uebox.style.hei ght) + 10;
idofbluebox.sty le.height = blueboxheightnu m + "px";
blueboxpostop = parseInt(idofbl uebox.style.top ) - 5;
idofbluebox.sty le.top = blueboxpostop + "px";
}
if (blueboxwidthnu m == widthto && blueboxheightnu m == heightto) {
clearInterval(t weenspeed)
}
}
}
</script>

----------------------------------------------------------------------------
--------------------

should this work with the clearInterval within the actual function called by
the setInterval method? I can't tell if it is working or not.

[color=blue]
> It just occured to me that the tween function may be what you refer to
> as a "blank" function. It's just an inner function.[/color]

yeah that's what I meant. Sorry for not having been more clear.

I use them a lot,[color=blue]
> especially in object constructors, because it simplifies accessing the
> parent's variables. It's a habit that may have confused you. You could
> just as easily have placed it outside, as long as it has access to the
> needed variables:
>
> <html>
> <head>
> <title>Untitl ed Document</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <script type="text/JavaScript">
> var idofbluebox;
> var blueboxwidthnum ;
> var blueboxheightnu m;
> var widthLimit, heightLimit;
>
> function growbluebox(wid thto,heightto) {
> idofbluebox = document.getEle mentById("blueb ox");
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th);
> blueboxheightnu m = parseInt(idofbl uebox.style.hei ght);
> widthLimit = widthto;
> heightLimit = heightto;
> setInterval(twe en, 1);
> }
>
> function tween() {
> if (blueboxwidthnu m < widthLimit) {
> blueboxwidthnum = parseInt(idofbl uebox.style.wid th) + 10;
> idofbluebox.sty le.width = blueboxwidthnum + "px";
> }
> }
> </script>
> </head>
> <body>
> <a href="#" onClick="growbl uebox(500,400)" >grow by 500 wide and 400
> high</a>
> <div id="bluebox" style="position :absolute; left:189px; top:96px;
> width:228px; height:129px; z-index:1; background-color: #99CCFF;
> layer-background-color: #99CCFF; border: 1px none #000000;"></div>
> </body>
> </html>[/color]

gotcha--thanks again.

**Albert Wagner** · Jul 20 '05, 11:27 AM

Re: slowing down a loop

On Wed, 29 Oct 2003 20:24:30 -0500
"TheKeith" <no@spam.com> wrote:
<snip>[color=blue]
> I do mind the loss of processing cycles. Is there some kind of
> software I can use to tell me if a script is still running even if
> nothing appears to be happening? I just added a clearInterval, like
> this:[/color]

There are several ways:
(1) the simplest is using an alert popup:
alert('The program got here');
This has the disadvantage that when called within a tight loop, you get
a bunch of them all at once.

(2) In Opera there is a special javascript statement:
opera.postError ('The program got here');
This displays on the javascript console and doesn't have to be replied
to like the alert above. There may be something equivalent in other
browsers.

(3) You can dynamically add elements to your page (or a debugging page):
var p = document.create Element('p');
p.appendChild(d ocument.createT extNode('The program got here');
document.body.a ppendChild(p);

(4) You can write a debugging harness. Use a frame set with the one
frame for controls like a textarea for debugging messages and load the
page to be tested in the other frame. I've built one of these for
testing animations but I was (still am) a newbie with javascript and it
was a hell of a learning experience.

(5) Netscape 7.1 and Mozilla have available the Venkman debugger. This
is probably the coolest debugging tool going.

(6) There are probably many more, but these are the only ones I have
personally utilized. Perhaps others here can offer their suggestions.

<snip>[color=blue]
> should this work with the clearInterval within the actual function
> called by the setInterval method? I can't tell if it is working or
> not.[/color]
<snip>

Yeah. Should work OK. Good luck on your project.

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

slowing down a loop

slowing down a loop

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment