setTimeout function hangs my browser?

Question

I an showing times using java script.

function showTime()
{
    setTimeout("showTime()", 500);      
    var now = new Date();
    var f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
    if (document.getElementById('foobar') == null)
    {
        showTime();
    }
    document.getElementById('foobar').innerHTML = f_date;

}

function strMonth(m)
{ ............ }

function timeFormat(curr_hour, curr_min)
{--------------}

showTime();

My Browser get sucked, or infinitely hanged. What should be the reason for that?

There is no showClock() only showTime().. Typo Mistake

Answer 1

use setInterval for this. Repetition is exactly what an interval is for (as opposed to a timeout).

Example:

//an edited showTime function for example
var showTime = function(){
    var now = new Date();
    document.getElementById('foobar').innerHTML = 
      now.toDateString()+" "+now.toTimeString();

};

//The interval
var myInterval = window.setInterval(showTime, 500);

Additionally: when you're done and want to stop the interval, use

window.clearInterval(myInterval);

Note per Pointy and the Mozilla docs setInterval can have issues.

Find out more here under the "Dangerous usage" section: https://developer.mozilla.org/en/window.setInterval

Edit: It appears your code has errors in one of the functions you did not post and that is causing your hangup. I've edited my example code to just demonstrate usage of an interval updating a time without any particular format and you can see that here at: http://jsfiddle.net/JVb2K/

Answer 2

This should work:

function showTime() {    
    var now = new Date(),
        foo = document.getElementById('foobar');

    if ( foo != null ) {
        foo.innerHTML = now.getDate() + ' ' + strMonth( now.getMonth() ) + 
                ' ' + now.getFullYear() + ' / ' + 
                timeFormat( now.getHours(), now.getMinutes() ); 
        setTimeout(showTime, 500);
    }
}

showTime();

So, only if there is a foobar element on the page, you set its contents and do the timeout.