setTimeout function hangs my browser?

I an showing times using java script.

function showTim开发者_运维知识库e()
{
    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

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/

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.

You have a recursive loop in here. Your showTime function calls itself, which calls itself, which calls itself. etc.

You need to reorder your code.

probably because you use setTimeout too early.try to put it in the end of function...

My guess would be because you're registering the timeout to call your method every 500ms which re-registers the method. In other words, you're recursively calling your method every 500ms.

Your method may or may not execute in that 500ms so the browser is really doing nothing except executing your code constantly (which would look a lot like a hang).

I would at least move the setTimeout() call to the end of the showTime() method and also increase the timeout to something like 1000ms or 2000ms (since you're only showing time down to the minute anyway, it could also be much higher).

You are calling showTime(), which then causes a 500 millisecond delay and calls showTime() again, which causes a 500 millisecond delay and calls showTime() again...etc. Since it keeps calling it over and over again without an end condition, it will never get out of that loop and execute the rest of the code in the function.

Your function showtime() is calling itself via settimeout() and making an infinite loop. ;-) try putting the settimeout call in a different function.

The main problem I see with your code is that you're putting setTimeout in the wrong place. It should be called when you call your function. I was able to get a barebones implementation of this code working in this jsFiddle, but here's the code:

function showTime() {
    var now = new Date();
    var f_date = now.getDate() + " " + now.getMonth() + " " + now.getFullYear() + " / " + now.getHours() + ":" + now.getMinutes();
    document.getElementById('foobar').innerHTML = f_date;
}

setTimeout("showTime()",1000);

This will update the foobar element after a 1 second. Again, see the jsFiddle.

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();

I don't know what this is trying to do but if you don't have the 'foobar' element in your document this will call itself recursively until the JavaScript engine runs out of stack space. However by this time you will have created a large number of timeouts, each of which will call itself recursively, creating yet more timeouts, etc, etc...

This is a very old topic, but for the people who are still in search.. I was stuck at the same place for 2 weeks and I got around with Ajax. I'm still a noob at this but take a look at Ajax Chat 3.1 (Room 1)

http://webscripts.softpedia.com/script/Chat-Scripts/Most-Simple-Ajax-Chat-Room-39054.html

This is an example for a chat which you can edit and implement. It doesnt hang and it works perfectly fine for me. I hope this works!