Javascript setTimeout

Posted: Tue Jul 22, 2003 2:09 pm (20 years, 9 months ago)

Does anybody know how to use the Javascript setTimeout object without calling a function ? I tried everything but nothing else works. Most Javascript sources indicate that the first parameter of the function can be any Javascript statement, but I have not seen it used anywhere without a function call. I just want to hold the execution of a for-loop for a specified time at each pass.
At the moment I have programmed around this problem by using a function that recursively calls itself from the setTimeout object and breaks after a given number of passes, but I find this rather unsatisfactory.

Posted: Wed Jul 23, 2003 4:38 pm (20 years, 9 months ago)

doesn't javascript have some kind of sleep() function?

Posted: Thu Jul 24, 2003 9:20 am (20 years, 9 months ago)

Odhinn wrote:

doesn't javascript have some kind of sleep() function?

Not as far as I am aware. sleep() is a Perl command.

I want to load some images in a delayed sequence and thought originally the following would work

for(i=1; i<=6; i++) {setTimeout("document.images[i].src='image'+i+'.jpg';" , 500); }

but it doesn't. Strangely, what happens is that it tries to display image number 7 (which is outside the loop) but none of the others. It seems that the loop variable gets confused by the setTimeout as it works without it (obviously without delay then).
As mentioned in my opening post, I solved the problem in the meanwhile by using a recursive function call from setTimeout, but I can't quite understand why the above for-loop doesn't work.

Junior WebHelper Joined: 31 Jul 2003 Posts: 1

have you tried it using a second line?

for example...
for(i=1; i<=6; i++)
while(i<=6) {setTimeout("document.images[i].src='image'+i+'.jpg';" , 500);}

im not sure if that works but maybe itl help anyway Wink

Posted: Fri Aug 01, 2003 2:43 pm (20 years, 8 months ago)

I solved the problem in the meanwhile. There were actually two errors in my original code (and in yours as well): 1) one has to take the variable i out of the string in document.images[i].src (apparently Javascript does not recognize the variable if the expression is embedded in the setTimeout function) and 2) one has to increment the delay time with the variable as otherwise the for-loop would have finished before even the first setTimeout.
The following code works therefore:

for(i=1; i<=6; i++) { setTimeout("document.images["+i+"].src='image"+i+".jpg';", i*500); }

However, because 6 timers are practically started simultaneously here (they just finish at different time), the image display is sometimes slightly irregular depending on how much the processor has to do. I left it therefore with my present recursive function solution which works without the for-loop and avoids using any variables in the setTimeout function.

Junior WebHelper Joined: 08 Nov 2003 Posts: 2

As I am a complete noobie to the place, I'll try not to waste time or anything.... And this is the first thread I've read, having gotten here through a Google search.

Anyways.

I'd like to know how I could use setTimeout(); to make a text message print to the screen after an amount of time (I think 15 seconds). While I wait, I'm gonna try messing with that line of code there.....

(PS - Normally I just grab stuff from JavascriptSource.com Laughing

)
(PPS - I've just recently decided to actually learn Javascript Rolling Eyes

any suggestions?)

Posted: Wed Nov 12, 2003 3:58 pm (20 years, 5 months ago)

Izkata wrote:

I'd like to know how I could use setTimeout(); to make a text message print to the screen after an amount of time (I think 15 seconds). While I wait, I'm gonna try messing with that line of code there.....

You have to use dynamic HTML to change text on a page after it has loaded. There are basically two ways of doing this: one is Microsoft's DHTML and the other is the more recent DOM.

With the first, you would have the following example script for changing 'Old Text' to 'New Text' on the page after 3 sec (if you want 15 sec, replace 3000 by 15000):
______________________

<HTML>
<HEAD>

<SCRIPT Language="Javascript" type="text/javascript">

</SCRIPT>

</HEAD>

<BODY onLOAD="timeout()">

<DIV id="repl">Old Text</DIV>

</BODY>
</HTML>
_________________

I have put the text into a DIV -tag here, but you could choose any other tag as well.
The good thing about this solution is that you can replace 'Old Text' not just by new text but arbitrary HTML tags (I used "<B>New Text</B>" here).
The disadvantage is that this works only in Internet Explorer (Version 4 and above).

The more widely accepted solution would be (the difference to above is just in the function 'replace')
__________________

<HTML>
<HEAD>

<SCRIPT Language="Javascript" type="text/javascript">

</SCRIPT>

</HEAD>

<BODY onLOAD="timeout()">

<DIV id="repl">Old Text</DIV>

</BODY>
</HTML>
______________________

This works in all browsers of version 5 and above.
The drawback is that you can't add any HTML tags here (it can be done but it gets rather complicated and I have not figured it out myself yet).

I personally use SELFHTML as a reference manual which covers HTML, CSS, Javascript, Perl and PHP. Unfortunately this is at the moment only available in German and French (http://selfhtml.teamone.de/ ).

If you do a web search for 'Javascript Tutorial' or 'Javascript Reference' on the web though you can find dozens of websites that offer online resources in this respect.
A good Javascript tutorial for people with little programming experience is in my opinion http://www.webteacher.com/javascript/ whereas people with some experience might prefer http://www.wdvl.com/Authoring/JavaScript/Tutorial/ .

I have made the experience however that there is no single web- or book- resource that covers absolutely everything, so it is always best to do a web-search if you are stuck with a particular problem.

Junior WebHelper Joined: 08 Nov 2003 Posts: 2

Haven't looked at tha second link, but the first looks very helpful.

Thanx!!

Hmm.. Shocked

<-- I like that smiley..

Junior WebHelper Joined: 14 Mar 2004 Posts: 5

Can I ask what the actual application for this function was? I'd love to see how you were using it. Smile

Junior WebHelper Joined: 15 Oct 2003 Posts: 11

The second link is pretty comprehensive and useful as a resource - once you get over the big pic of the man grinning at you! Smile

Junior WebHelper Joined: 07 Jun 2004 Posts: 1

Thomas2 wrote:

I solved the problem in the meanwhile. There were actually two errors in my original code (and in yours as well): 1) one has to take the variable i out of the string in document.images[i].src (apparently Javascript does not recognize the variable if the expression is embedded in the setTimeout function)

I think you don't quite understand what setTimeout does. It starts an asynchronous timer. When the timer runs out, the string you passed as the first parameter is evaluated as JavaScriupt code. So what your first piece of code did was run through a for loop, setting 6 timers to all go off in 500 ms, each with the exact same code. Then after 500ms, these exact same pieces of code would be evaluated, using the then-current value of i (which was 7 by then, since the for loop had terminated).

What you want to do is make a new function that changes the image and then sets a new timer. This way you only have one timer running at any given moment.

var i = 1;

function showNextImage() {
document.images[i].src='image'+i+'.jpg';
if (++i <= 6) setTimeout("showNextImage()", 500);
}

setTimeout("showNextImage()", 500);

Junior WebHelper Joined: 24 Jun 2004 Posts: 1

(new to JavaScript.)
I've been working with this setTimeout issue for a day, and really appreciate your explanation.

There is a part I don't understand:

In your code:
document.images[i].src='image'+i+'.jpg''
where does the - images[i] - come from?

In my code, the property that comes after document.
document.my_graphic.src=image_list[i];
is the same variable that is in the html <img name="my_graphic" src=...
How do you use an array there?

Thanks,

Junior WebHelper Joined: 16 Sep 2004 Posts: 1

I'm trying to keep my menus from dissappearing immediately after a user moves his/her mouse off of it... I figured this setTimeout thing would do it but it's not working...

here's my code (pretty basic):

Code:

it displays the menu (i have similar code attached to a menu button) just fine and it stays open when the mouse is over it, but when I move outside the menu it dissappears immediately

thanks for any help!

-JL

Junior WebHelper Joined: 13 May 2009 Posts: 2

How to create Javascript Smiley code that will appear in my website's comment box ? I need to create a Javascript code that will appear inmy website's comment box . I am using Ning Social Network's Website.
I need a code that will display the image of a Smiley with URL . Please help me , you can post the cod ethat i can use with the answer . Thanks!