[thelist] setTimeout Question

Tom Dell'Aringa pixelmech at yahoo.com
Tue Jul 16 13:01:01 CDT 2002


Mike,

On the one hand you are getting what you want - the document writes
out your images left to right using the writeRight() function in your
while loop. I think you just want to SEE it happen (it happens too
fast).

Using a setTimeout inside the while loop doesn't appear to work (on
your right and left functions) because the execution of the while
loop happens too quickly (thats my guess).

I think if you simply try a for loop, with a know number of
iterations (say 12 footprints) instead of while loop it may work.

Remember, you want to delay the execution of the function, so you
can't have any other timing messing with it (like a while loop).

thus:

for (i=0; i<=12; i++)
{
   setTimeout("writeLeft()", 1000);
   setTimeout("writeRight()", 1000);
}

I'm not even sure what your other code is for, if all you want to do
is write out the images. You'll have to play with it for the timing,
but this should work - but the problem you are going to have is that
document.write will rewrite your whole page...

I'm not sure how to get around that, but I'm thinking you want to use
innerHTML or something else to write to a DIV instead.

Tom
--- Michael Robertson <mike at mikeemedia.com> wrote:
> here is the URL for what I'm working on.
>
> http://www.mikeemedia.com/dev/xxx.asp
>
> You're right it does only execute once. I also tried setInterval()
> with
> virtually the same results. My thinking was that since this was
> inside the
> loop it would execute until the loop was done. Apparently not. The
> effect
> I'm after is seeing each footstep appear one at a time until the
> right
> number is reached. Suggestions?
>
> >
> > --- Michael Robertson <mike at mikeemedia.com> wrote:
> > > I have a script that writes out images in a graph style like
> below.
> > > It works
> > > great like this. What I want to do is make them write out
> > > sequencially sort
> > > of like an animated thing. My idea was to call the functions in
> a
> > > setTimeout() like this:
> > >
> > > setTimeout("writeRight()",1000)
> > >
> > > but it doesn't work. Why not? And is there a better way to
> > > accomplish this?
> > > Thanks.
> >
> >
> >
> > The only thing that your setTimeout function does is execute the
> > function writeRight() after one second. That's it. Remember,
> > setTimeout mereley is a DELAY before execution. I don't know
> where or
> > how you are calling it, if you are only calling it once, you get
> one
> > result. I'm going to guess you are getting document.write('<img
> > style="vertical-align:bottom;float:right">
> > src="../images/footStepsRight.gif">'); written out once.
> >
> > Its a bit tough to read your code in the email - easier if you
> post a
> > link to the page for debugging.
> >
> > setTimeout is another misused method. Often what a person really
> > wants is a setInterval(). However, not sure that will even work
> in
> > your case. Is it the while loop you want to execute repeatedly?
> Post
> > a link to your page.
> >
> > Tom
> >
> >
> >
> >
> > >
> > > <script language="JavaScript" type="text/JavaScript">
> > >  var intSteps=0;
> > >  var intTop=200;
> > >  var intLeft=200;
> > >  var intTotal=5400;
> > >  var strChar="char2";
> > >  var rndTotal=(intTotal/500) *500
> > >
> > >  function writeRight(){
> > >   document.write('<img
> style="vertical-align:bottom;float:right"
> > > src="../images/footStepsRight.gif">');
> > >  }
> > >
> > >  function writeLeft(){
> > >   document.write('<img style="vertical-align:top;float:left"
> > > src="../images/footStepsLeft.gif">');
> > >  }
> > >
> > >  while(intSteps<rndTotal){
> > >   document.write('<span style="position:absolute;top:' + intTop
> +
> > > 'px;left:'
> > > + intLeft + ' px;height:45px;width:36px;padding:0px">');
> > >   writeLeft()
> > >   intSteps+=500;intLeft+=27
> > >    if (intSteps < rndTotal) {
> > >     writeRight()
> > >    }
> > >   document.write('</span>')
> > >   }
> > >   document.write('<img src="../images/' + strChar + 'D.gif"
> > > style="position:absolute;top:' + (intTop + 2) + 'px;left:' +
> > > (intLeft + 10)
> > > + 'px">')
> > >   document.write('<span style="position:absolute;top:' +
> (intTop +
> > > 10) +
> > > 'px;left:' + (intLeft + 36) +
> > >
> >
>
'px;padding:1px;color:#175692;font-weight:bold;background-color:#fe7a22">')
> > >   document.write(intTotal + "/" + rndTotal)
> > >   document.write('</span>')
> > > </script>
> > >
>
>
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !


=====
var me = tom.pixelmech.webDeveloper();
http://www.pixelmech.com/

__________________________________________________
Do You Yahoo!?
Yahoo! Autos - Get free new car price quotes
http://autos.yahoo.com



More information about the thelist mailing list