Greetings,

The following JavaScript code displays a clock in a <p id="time"></p> element on a web page and updates the clock once per minute.

When letting this code run for ~10 minutes under FireFox 2.0.0.16 on Ubuntu 6.10 and Mac OS X, Firefox eventually becomes unresponsive. A CPU check shows Firefox consuming +100% of the CPU.

Am I losing my mind or did I code something incorrect?
I'd appreciate your thoughts. Thanks.

window.onload = function() {
    
    /*
    * Execute the following functions in the order they appear after the webpage loads.
    * The reason being, the DOM needs to finish loading in order for these functions to
    * manipulate certain elements.
    */

    displayTime();
}


function displayTime() {
    var date = new Date();
    var hour = date.getHours();  // Returns 0-23.
    var minutes = date.getMinutes(); // Returns 0-59.

    // Is it AM or PM?
    if (hour >= 12) {
        var ampm = "PM";
    } else {
        ampm = "AM";
    }

    // Convert hours format from 24 hour to 12 hour format.
    if (hour > 12) {
        hour = hour - 12;
    }

    // Convert hour 0 to 12.
    if (hour == 0) {
        hour = 12;
    }

    // Convert minutes format to mm for 0-9.
    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    // Put everything together to form the current time.
    var time = hour + ":" + minutes + " " + ampm;

    // Display the time on the webpage.
    var paraTime = document.getElementById("time");

    if (paraTime.childNodes.length > 0) {  // Meaning it has childNodes. hasChildNodes doesn't work.
        paraTime.removeChild(paraTime.firstChild);
    }

    paraTime.appendChild(document.createTextNode(time));

    // Update the clock every one minute.
    setInterval(displayTime, 60000);
}

Change setInterval to setTimeout the way you are doing it. Or move the setInterval to the onload function.

What's happening?
the setInterval will call the function over and over. The prob, the end of the function starts ANOTHER interval. So, everytime the function runs you are stacking up another one. After 10 minutes, you've got 11 intervals running, all trying to mess with the dom.

BTW, 100% CPU is not the same as crashing. If Firefox crashed, it would not be running anymore.

I'm embarrassed, haha.

Thank you for your quick reply and, most importantly, helping me understand why my code was behaving like it was.

I decided to replace setInterval with setTimeout, since setTimeout executes displayTime once and then stops.

Thanks again for your help.

This is an important lesson that I've had to learn the hard way, also.