SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Hybrid View
-
May 18, 2007, 12:05 #1
- Join Date
- Apr 2006
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Creating a javascript delay... help!
Basically I want my html page to do this:
Welcome to the site!
(wait 1 second)
Feel free to look around.
(wait 1 second)
Thanks!
-
May 18, 2007, 17:20 #2
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try making one function which displays the text "Feel free to look around" and one to display "Thanks", then call them using the window.setTimeout method after 1000ms (=1 second) and 2000ms (=2 seconds).
Also remember that someone might not look at your page for the full two seconds!
DouglasHello World
-
May 18, 2007, 18:25 #3
- Join Date
- Apr 2006
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
May 19, 2007, 05:42 #4
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Something like this:
HTML Code:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>sample</title> <script type="text/javascript" charset="utf-8"> function sayHello(id) { var el = document.getElementById(id); el.innerHTML += "<br/>Hello world!"; } </script> </head> <body> <div id="hello-div"> Hello? </div> <script type="text/javascript" charset="utf-8"> setTimeout(function() { sayHello("hello-div") }, 2000); </script> </body> </html>
Hello World
-
May 19, 2007, 09:17 #5
- Join Date
- Apr 2007
- Posts
- 813
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
probably something further improved
Code:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>sample</title> <script type="text/javascript" charset="utf-8"> words = ["Welcome to the site!", "Feel free to look around", "Thanks!"]; global_i = 0; function sayHello() { el = document.getElementById('hello-div'); el.innerHTML += "<br/>"+words[global_i++] ; if (global_i >= words.length) window.clearInterval(helloInterval); } </script> </head> <body> <div id="hello-div"> Hello? </div> <script type="text/javascript" charset="utf-8"> helloInterval = window.setInterval( sayWords, 2000); </script> </body> </html>
-
May 19, 2007, 10:10 #6
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmm, Javascript is a Functional programming language, that means that functions are important to the language. We can rewrite the code above to not use the global array or the global counter. (Globals are generally a bad thing, as you can only have them once on a page. It makes it more likely that two scripts will interfere with each other and break.)
If you take the original function to display a message:
Code:function sayHello(id) { var el = document.getElementById(id); el.innerHTML += "<br />Hello world!"; }
Code:function addMessageTo(id) { var el = document.getElementById(id); return function(message) { el.innerHTML += "<br />" + message; } }
Code:var say = addMessageTo("mydiv"); say("Hello World!");
setTimeout requires a function which can be called without any arguments, so we can change the function say into one which, when called itself, displays the message. It now looks like this:
Code:function addMessageTo(id) { var el = document.getElementById(id); return function(message) { return function() { el.innerHTML += "<br />" + message; } } }
Code:var say = addMessageTo("mydiv"); var sayHello = say("Hello World!"); setTimeout(sayHello, 1000);
Putting it all together:
HTML Code:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>sample</title> <script type="text/javascript" charset="utf-8"> function addMessageTo(id) { var el = document.getElementById(id); return function(message) { return function() { el.innerHTML += "<br />" + message; } } } </script> </head> <body> <div id="hello-div"> <!-- content added here --> </div> <script type="text/javascript" charset="utf-8"> var show = addMessageTo("hello-div"); setTimeout(show("Welcome to the site!"), 1000); setTimeout(show("Feel free to look around."), 2000); setTimeout(show("Thanks!"), 3000); </script> </body> </html>
).
hth,
DouglasLast edited by DougBTX; May 19, 2007 at 16:36.
Hello World
-
May 19, 2007, 16:15 #7
- Join Date
- Apr 2006
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks so much! This last post ended up doing the trick and worked great!
Bookmarks