Author |
Message |
Thomas2
Junior WebHelper
Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK
|
Posted:
Tue Jul 22, 2003 2:09 pm (20 years, 8 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. |
|
|
|
|
adam
Forum Moderator & Developer
Joined: 26 Jul 2002
Posts: 704
Location: UK
|
Posted:
Wed Jul 23, 2003 4:38 pm (20 years, 8 months ago) |
|
doesn't javascript have some kind of sleep() function? |
________________________________ It's turtles all the way down... |
|
|
|
Thomas2
Junior WebHelper
Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK
|
Posted:
Thu Jul 24, 2003 9:20 am (20 years, 8 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. |
|
|
|
|
bezeek
Junior WebHelper
Joined: 31 Jul 2003
Posts: 1
|
Posted:
Thu Jul 31, 2003 2:25 pm (20 years, 8 months ago) |
|
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 |
|
|
|
|
Thomas2
Junior WebHelper
Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK
|
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. |
|
|
|
|
Izkata
Junior WebHelper
Joined: 08 Nov 2003
Posts: 2
|
Posted:
Sat Nov 08, 2003 8:49 pm (20 years, 4 months ago) |
|
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 )
(PPS - I've just recently decided to actually learn Javascript any suggestions?) |
|
|
|
|
Thomas2
Junior WebHelper
Joined: 22 Jul 2003
Posts: 9
Location: Leicester, UK
|
Posted:
Wed Nov 12, 2003 3:58 pm (20 years, 4 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">
<!--
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. |
|
|
|
|
Izkata
Junior WebHelper
Joined: 08 Nov 2003
Posts: 2
|
Posted:
Fri Nov 14, 2003 1:53 am (20 years, 4 months ago) |
|
Haven't looked at tha second link, but the first looks very helpful.
Thanx!!
Hmm.. <-- I like that smiley.. |
|
|
|
|
carolblake1975
Junior WebHelper
Joined: 14 Mar 2004
Posts: 5
|
Posted:
Mon Mar 15, 2004 2:45 pm (20 years ago) |
|
|
|
|
I, Brian
Junior WebHelper
Joined: 15 Oct 2003
Posts: 11
|
Posted:
Mon Mar 22, 2004 2:16 pm (20 years ago) |
|
|
|
|
Frans
Junior WebHelper
Joined: 07 Jun 2004
Posts: 1
|
Posted:
Mon Jun 07, 2004 3:15 pm (19 years, 10 months ago) |
|
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); |
|
|
|
|
Rachel
Junior WebHelper
Joined: 24 Jun 2004
Posts: 1
|
Posted:
Thu Jun 24, 2004 10:08 pm (19 years, 9 months ago) |
|
(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 |
|
|
|
GilaHacker
Junior WebHelper
Joined: 16 Sep 2004
Posts: 1
|
Posted:
Thu Sep 16, 2004 1:22 am (19 years, 6 months ago) |
|
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 |
|
|
|
|
rimmazz
Junior WebHelper
Joined: 13 May 2009
Posts: 2
|
Posted:
Thu May 14, 2009 9:56 am (14 years, 10 months ago) |
|
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! |
|
|
|
|
|