Creating a javascript delay... help!

**GoLevel** · May 18, 2007, 11:05

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!

**DougBTX** · May 18, 2007, 16:20

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!

Douglas

**GoLevel** · May 18, 2007, 17:25

Originally Posted by DougBTX

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!

Douglas

Thanks, what code would I use for this?

I tried the setTimeout with document.write but it made it a blank page with the written text.

**DougBTX** · May 19, 2007, 04:42

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>

**SimplyFu** · May 19, 2007, 08:17

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>

**DougBTX** · May 19, 2007, 09:10

Originally Posted by SimplyFu

probably something further improved

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

This function lets us display "hello" in the element. We can change this into a function which returns another function which can add any message we like:

Code:

function addMessageTo(id) {
  var el = document.getElementById(id);
  return function(message) {
    el.innerHTML += "<br />" + message;
  }
}

You can use this like so:

Code:

var say = addMessageTo("mydiv");
say("Hello World!");

and then "Hello World" gets added to "mydiv".

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;
    }
  }
}

And you can use it like this:

Code:

var say = addMessageTo("mydiv");
var sayHello = say("Hello World!");
setTimeout(sayHello, 1000);

This means that we can display any message, after any timeout. Which is a bit more flexible than adding everything to an array right at the start.

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>

Notice that now we don't need the global array, the global counter, storage for the helloInterval, we don't need to call clearInterval, there is no if statment, we only call document.getElementById once, and we have full control over when each message is shown and what message to add (Functional programming is nice

).

hth,
Douglas

**GoLevel** · May 19, 2007, 15:15

Thanks so much! This last post ended up doing the trick and worked great!

The SitePoint Forums have moved.

User Tag List

Thread: Creating a javascript delay... help!

Thread Tools

Display

Hybrid View

Creating a javascript delay... help!

Bookmarks

Bookmarks

Posting Permissions