Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    41
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Question javascript delay

    Hi,

    is there any way to delay a javascript action with a timer?

    For example i want to publish a message using document.write and i want to show another message a few seconds later.

    PHP Code:
    document.write('My first message');
    document.write('Did you try our new functionality'); 
    I want to setup a timer for the second document element.

  • #2
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    216
    Thanks
    0
    Thanked 29 Times in 27 Posts
    Use a settimeout(myFunction,delay) with the delay in milliseconds;
    But do not use document.write the document will be closed and the second document.write will remove the page. (document.write is only useful for short examples or special uses).

    An example with an anonymous function and a delay of 5 seconds
    Code:
    <body>
    <div id="rsp"></div>
    <script type="text/javascript">
    document.getElementById('rsp').innerHTML='<p>My first message</p>';
    setTimeout(function(){document.getElementById('rsp').innerHTML+='<p>Did you try our new functionality</p>';},5000);
    </script>
    </body>
    Last edited by 007julien; 08-02-2013 at 04:29 PM.

  • Users who have thanked 007julien for this post:

    tribalmp (08-05-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    To make that clear, document.write() has been obsolete since Netscape 3 passed away 10+ years ago. document.write() statements must be run before the page finishes loading. Any document.write() statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it). So document.write() is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    If you don't have any choice about a script containing a document.write statement then you can use the postscribe script at https://github.com/krux/postscribe to fix that command so that it will work properly with modern browsers with an id in the place in the page where it is to output and with the script just before the </body> tag where all JavaScript (except those that must run before the page loads) should be placed.

    You should only use that if you must use a script written for Netscape browsers and do not have access to replace the document.write statements with something not as prehistoric.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But that can't apply in this case, Felgall: He wants to do a document.write after a setTimeout. But that means that, by definition, the page *will* be loaded. And even in ancient browsers that means that the document.write after the timeout will wipe the page. Ergo, there's no point in even discussing document.write in this connection.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by Old Pedant View Post
    But that can't apply in this case, Felgall: He wants to do a document.write after a setTimeout.
    The document.write defined by postscribe that replaces the native call can only run AFTER the page has loaded as it uses an id to determine where in the page that the document.write is to write to. When you use postscribe you cannot use document.write before the part of the page that the postscribe call references has loaded.

    Postscribe effectively converts all the document.write calls in the page into the equivalent innerHTML calls.

    For example the Google adsense script uses document.write statements to insert the ad but if you use postscribe you can add the script at the bottom of the page after the page has loaded and have those document.write statements work. The document.write statements inside of the Google show_ads.js script will function correctly to insert the ad into the page when you code the call like this:

    Code:
    <div id="adv1"></div>
    
    <script type="text/javascript" src="postscribe.js"></script>
    <script type="text/javascript" src="htmlParser.js"></script>
    <script type="text/javascript">
    google_ad_client = "pub-9999999999999999";
     google_ad_slot = "9999999999";
     google_ad_width = 300;
     google_ad_height = 250;
     postscribe('#adv1','<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');
    </script></body>
    Of course you would only use this approach when the document.write statements are inside of a third party script that you are not allowed to directly recode to use 21st century replacements. It is far better that you rewrite the document.write calls to better code yourself where possible rather than using postscribe to override the write function defined by the browser.postscribe.js

    Having document.write statements that use the Postscribe write function in place of the built in one should be able to work just as well after a setTimeout as using innerHTML or DOM calls would.
    Last edited by felgall; 08-03-2013 at 01:20 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ahhh...I see! Clever. But wow, what a pain. Thanks.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by Old Pedant View Post
    But wow, what a pain.
    Exactly. Unfortunately it is the only way to fix the obsolete document.write statement so that it will work properly with modern browsers for all situations.

    There are a number of situations where the built in document.write fails completely such as the delay situation mentioned above or where the page is served as XHTML. For those situations and where getting rid of the document.write is not an option, using postscribe (or something similar) appears to be the only alternative.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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