4WebHelp
 FAQ  •  Search  •  User Groups  •  Forum Admins  •  Smilies List  •  Statistics  •  Rules   •  Login   •  Register
Toggle Navigation Menu

 Javascript setTimeout
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic
Author Message
Thomas2
Junior WebHelper
Junior WebHelper


Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK

PostPosted: Tue Jul 22, 2003 2:09 pm (14 years, 4 months ago) Reply with QuoteBack to Top

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.
OfflineView User's ProfileFind all posts by Thomas2Send Personal Message
adam
Forum Moderator & Developer



Joined: 26 Jul 2002
Posts: 704
Location: UK

PostPosted: Wed Jul 23, 2003 4:38 pm (14 years, 4 months ago) Reply with QuoteBack to Top

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

________________________________
It's turtles all the way down...
OfflineView User's ProfileFind all posts by adamSend Personal MessageVisit Poster's Website
Thomas2
Junior WebHelper
Junior WebHelper


Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK

PostPosted: Thu Jul 24, 2003 9:20 am (14 years, 4 months ago) Reply with QuoteBack to Top

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.
OfflineView User's ProfileFind all posts by Thomas2Send Personal Message
bezeek
Junior WebHelper
Junior WebHelper


Joined: 31 Jul 2003
Posts: 1

PostPosted: Thu Jul 31, 2003 2:25 pm (14 years, 3 months ago) Reply with QuoteBack to Top

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
OfflineView User's ProfileFind all posts by bezeekSend Personal Message
Thomas2
Junior WebHelper
Junior WebHelper


Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK

PostPosted: Fri Aug 01, 2003 2:43 pm (14 years, 3 months ago) Reply with QuoteBack to Top

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.
OfflineView User's ProfileFind all posts by Thomas2Send Personal Message
Izkata
Junior WebHelper
Junior WebHelper


Joined: 08 Nov 2003
Posts: 2

PostPosted: Sat Nov 08, 2003 8:49 pm (14 years ago) Reply with QuoteBack to Top

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?)
OfflineView User's ProfileFind all posts by IzkataSend Personal Message
Thomas2
Junior WebHelper
Junior WebHelper


Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK

PostPosted: Wed Nov 12, 2003 3:58 pm (14 years ago) Reply with QuoteBack to Top

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">
<!--

function timeout() {
setTimeout("replace()",3000);
}

function replace() {
document.all.repl.innerHTML="<B>New Text</B>";
}

//-->
</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">
<!--

function timeout() {
setTimeout("replace()",3000);
}

function replace() {
document.getElementById("repl").firstChild.nodeValue="New Text";
}

//-->
</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.
OfflineView User's ProfileFind all posts by Thomas2Send Personal Message
Izkata
Junior WebHelper
Junior WebHelper


Joined: 08 Nov 2003
Posts: 2

PostPosted: Fri Nov 14, 2003 1:53 am (14 years ago) Reply with QuoteBack to Top

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

Thanx!!




Hmm.. Shocked <-- I like that smiley..
OfflineView User's ProfileFind all posts by IzkataSend Personal Message
carolblake1975
Junior WebHelper
Junior WebHelper


Joined: 14 Mar 2004
Posts: 5

PostPosted: Mon Mar 15, 2004 2:45 pm (13 years, 8 months ago) Reply with QuoteBack to Top

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

________________________________
Surveillance Equipment / CCTV UK / wireless camera / DVR Cards

USB phone / baby monitor
OfflineView User's ProfileFind all posts by carolblake1975Send Personal MessageVisit Poster's Website
I, Brian
Junior WebHelper
Junior WebHelper


Joined: 15 Oct 2003
Posts: 11

PostPosted: Mon Mar 22, 2004 2:16 pm (13 years, 8 months ago) Reply with QuoteBack to Top

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

________________________________
business forums | internet marketing UK | SEO
religions of the world | the Apocrypha
sci-fi/fantasy chats and forums | science fiction and fantasy books
OfflineView User's ProfileFind all posts by I, BrianSend Personal MessageVisit Poster's Website
Frans
Junior WebHelper
Junior WebHelper


Joined: 07 Jun 2004
Posts: 1

PostPosted: Mon Jun 07, 2004 3:15 pm (13 years, 5 months ago) Reply with QuoteBack to Top

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);
OfflineView User's ProfileFind all posts by FransSend Personal Message
Rachel
Junior WebHelper
Junior WebHelper


Joined: 24 Jun 2004
Posts: 1

PostPosted: Thu Jun 24, 2004 10:08 pm (13 years, 5 months ago) Reply with QuoteBack to Top

(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,

________________________________
Peace and Health,
-Rachel
OfflineView User's ProfileFind all posts by RachelSend Personal Message
GilaHacker
Junior WebHelper
Junior WebHelper


Joined: 16 Sep 2004
Posts: 1

PostPosted: Thu Sep 16, 2004 1:22 am (13 years, 2 months ago) Reply with QuoteBack to Top

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:
<table id="franchiseyourbusiness" class="dropmenu" style="left:0px; top:92px;" border="0" cellpadding="0" cellspacing="0" onMouseOver="franchiseyourbusiness.style.visibility='visible'" onMouseOut="setTimeout(franchiseyourbusiness.style.visibility='hidden',50)">


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
OfflineView User's ProfileFind all posts by GilaHackerSend Personal MessageVisit Poster's Website
rimmazz
Junior WebHelper
Junior WebHelper


Joined: 13 May 2009
Posts: 2

PostPosted: Thu May 14, 2009 9:56 am (8 years, 6 months ago) Reply with QuoteBack to Top

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!
OfflineView User's ProfileFind all posts by rimmazzSend Personal Message
Display posts from previous:      
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic


 Jump to:   




You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot edit your posts in this forum.
You cannot delete your posts in this forum.
You cannot vote in polls in this forum.


Page generation time: 0.491425 seconds :: 17 queries executed :: All Times are GMT
Powered by phpBB 2.0 © 2001, 2002 phpBB Group :: Based on an FI Theme