CODEWITHSUNDEEP
javascriptjquerydatetime
user12345
user12345

Reputation: 2418

setTimeout function hangs my browser?

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

Upvotes: 3

Views: 5584

Answers (9)

Šime Vidas
Šime Vidas

Reputation: 185913

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.

Upvotes: 1

Neil
Neil

Reputation: 55392

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...

Upvotes: 0

Jason Benson
Jason Benson

Reputation: 3399

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/

Upvotes: 3

eykanal
eykanal

Reputation: 27017

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.

Upvotes: 0

immutabl
immutabl

Reputation: 6903

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

Upvotes: 0

gpcz
gpcz

Reputation: 806

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.

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245409

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).

Upvotes: 0

Mike Mengell
Mike Mengell

Reputation: 2398

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.

Upvotes: 1

DrStrangeLove
DrStrangeLove

Reputation: 11557

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

Upvotes: 0

Related Questions