CODEWITHSUNDEEP
javascript
Waypoint
Waypoint

Reputation: 17753

Adding text periodically

I am trying to run small snippet code in JavaScript, where I want to write on the web page simple hello world each 5 seconds. I think it must be ok, but no, still I got only first hello world and no more. Could you give me a hand in this? Thanks

 <script type="text/javascript">
 var i=0;

 function startTimer() {

    window.setTimeout('refresh()',5000);
 }

 function refresh() {

 document.write("Hello world "+i+"<br/>");
 i++;
 window.setTimeout('startTimer()',1);
 } 

 startTimer();
 </script>

Upvotes: 2

Views: 172

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49208

NOTE: As Amar Palsapure has noted in this answer, the root cause of the problem was the use of document.write. In my demonstration, I use a p element to document.body.appendChild() to add the text to the screen.

You can use setTimeout(), but you have to make it contingent on the last setTimeout() that ran; so that each time the caller runs, it creates the next timeout.

setInterval() is designed to run at a "regular" interval (neither setTimeout() nor setInterval() are truly reliable in when they run); however, if the calls to setInterval() get backed up due to some other process blocking it's execution (Javascript is single-threaded), you could have issues with those queued callbacks. That's why I prefer the approach I have below.

Note, refrain from the setTimeout('funcCalled()', 100) usage; this is running an eval() on that string you're passing in, which can change the scope in which you're running the callback, as well as being considered "evil" due to security issues related to eval(). You're best to avoid it altogether.

EDIT - Modified slightly.

I have made some changes to the approach. See my comments.

// The first and last lines comprise a self-executing,
// anonymous function, eg, (function(){})();.
// This allows me to use a local function scope and not the
// global window scope, while still maintaining my variables
// due to it being a "closure" (function(){}).
(function(){
    var i = 0,
        timer = 5000,
        // I'm just going to add this to the DOM.
        text = document.createElement('p'); 

    // This is a variable function, meaning it stores a 
    // reference to a function.
    var helloWorld = function() {
        // Here is where I add the Hello World statement
        text.innerHTML += 'Hello World! Loop: ' + i++ + '<br/>';
        // Them add it to the DOM.
        document.body.appendChild(text);

        // I added this so it wouldn't run forever.
        if (i < 100) {
            // A setTimeout() will be added each time the last
            // was run, as long as i < 100.
            // Note how I handle the callback, which is the
            // first argument in the function call.
            setTimeout(helloWorld, timer);
        }

        // I added the change so it wouldn't take so long 
        // to see if was working.
        timer = 500;
    }

    // Here I use a variable function and attach it to the
    // onload page event, so it will run when the page is
    // done loading.
    window.onload = helloWorld;
})();

http://jsfiddle.net/tXFrf/2/

Upvotes: 2

Amar Palsapure
Amar Palsapure

Reputation: 9680

The main issue is document.write. There is nothing wrong with setTimeout or rest of the code.

The reason it does not work is that once document.write is called the first time, it overwrites your existing code of setTimeout() and since there is no code so it will not work. What you need to do is use some other means to write the value in the page, certainly no document.write...

Instead of using setInterval use setTimeout.

You can try this

<html>
   <body>
    <div id="clock" ></div>
    <script type="text/javascript">
      var i = 0,
         timerHandle,
         clock;

      function startTimer() {
          clock = document.getElementById('clock');
          //You can use timerHandle, to stop timer by doing clearInterval(timerHandle)  
          timerHandle = self.setInterval(funRefresh, 2000);
      }

      var funRefresh = function refresh() { 
         clock.innerHTML += "Hello world " + i++ + "<br/>";
      } 
      startTimer();
    </script>
  </body>
 </html>

Hope this helps you.

Upvotes: 1

Sandeep G B
Sandeep G B

Reputation: 4015

Here is the working Code

    var i = 0;

function startTimer() {
    window.setInterval(refresh, 5000);
}

function refresh() {
    document.write("Hello world " + i + "<br/>");
    i++;

   // window.setTimeout(startTimer,1);
}

startTimer();​

Upvotes: -1

Related Questions