SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    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!

  2. #2
    SitePoint Wizard DougBTX's Avatar
    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!

    Douglas
    Hello World

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX View Post
    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.

  4. #4
    SitePoint Wizard DougBTX's Avatar
    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

  5. #5
    SitePoint Guru
    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>

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimplyFu View Post
    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
    Last edited by DougBTX; May 19, 2007 at 16:36.
    Hello World

  7. #7
    SitePoint Member
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •