I got bitten yesterday by my own stupidity, while trying to "improve" some code I'd inherited as part of an app.

The code looked something like this, in essence:

function callRepeatedly(){
        document.getElementById("updateMe").innerHTML= 
                new Date().toString();
}

function callOnce(){
        callRepeatedly();
        window.setInterval("callRepeatedly()", 5000);
}

window.onload = callOnce

You can probably work out that the page it lives on has an element's HTML updated every five seconds to the current time. Pointless I know, but stick with it.

Always thinking I know better I looked at the code and thought I'd make it simpler by removing the callOnce() function, which seemed redundant to me.

My re-factored code looked like:

function callRepeatedly(){
        document.getElementById("updateMe").innerHTML=
                new Date().toString();
                
        window.setInterval("callRepeatedly()", 5000);   
}


window.onload = callRepeatedly

This shorter bit of code did the same thing and less code is always a better thing, right? When the page loaded the element got updated and a "time out" was set to do the same every five seconds.

I made the change and thought nothing more of it. That's when the issues began. The website starting hanging the browser (100% CPU leading to forced closing of the task!) if the browser was left standing for more than about 10 minutes.

At first I had no idea what was causing this and it took me hours and hours to work out it was because of the "improvement" I had made to the above code.

Can you see what was causing the browser to crash? Top prize to anybody who can!