Question

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>

Answer 1

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/