Question

I have a page with a script that does only 2 things: change the color or a background and keep a time counter. There’s a memory leak somewhere.

The JSFiddle is here

This is the script:

var TheDateToday = new Date();

var TheColorEffect = (function () {

   var TheColorArray = ['red', 'blue', 'purple'];

   return function () {

       var TheColor = Math.floor(Math.random() * 3);
       var TheOpacity = (Math.floor(Math.random() * 20) + 80) / 100;

       document.getElementById('TheText').style.color = TheColorArray[TheColor];
       document.getElementById('TheText').style.opacity = TheOpacity;

       document.getElementById('ThePanel').style.backgroundColor = TheColorArray[TheColor];
       document.getElementById('ThePanel').innerText = TheDateToday.toTimeString();
       };
   }());

var TheDateIncrement = (function () {

   return function () {
        TheDateToday.setSeconds(TheDateToday.getSeconds() + 10); };
}());

setInterval(TheDateIncrement, 10000);
setInterval(TheColorEffect, 2000);

and this is the css/html:

 #TheText{
    font-size:20px;
    font-family:Verdana;
    margin:20px 20px;
    -webkit-transition:color 2s ease;
    -moz-transition:color 2s ease;
    -o-transition:color 2s ease;
    transition:color 2s ease;}

   #ThePanel{
    height:100px;
    width:200px;
    clear:both;
    color:white;
    padding:20px 20px;
    background:red;
    -webkit-transition:background 2s ease;
    -moz-transition:background 2s ease;
    -o-transition:background 2s ease;
    transition:background 2s ease;}​


<div id="TheText">This is a test text</div>
<div id="ThePanel"></div>​

When you go to Timeline in chrome and look at the memory usage, it just goes up. And if you open several of these pages in separate tabs, the CPU can get to 90% usage.

Where’s the leak??
Thanks for your suggestions on fixing this.

Answer 1

I changed your code to this, found cpu and memory reduced. The function timing calls are reduced while testing the load.

var TheColorEffect = new function () {

    var TheDateToday = new Date();
    var TheColorArray = ['red', 'blue', 'purple'];
    var TheColor = 0;
    var TheOpacity = 0;

    this.change = function () {
        TheColor = Math.floor(Math.random() * 3);
        TheOpacity = (Math.floor(Math.random() * 20) + 80) / 100;

        document.getElementById('TheText').style.color = TheColorArray[TheColor];
        document.getElementById('TheText').style.opacity = TheOpacity;
        document.getElementById('ThePanel').style.backgroundColor = TheColorArray[TheColor];
        document.getElementById('ThePanel').innerText = TheDateToday.toTimeString();

    }

    this.TheDateIncrement = function () {
        TheDateToday.setSeconds(TheDateToday.getSeconds() + 10);
    }

};


setInterval(TheColorEffect.TheDateIncrement, 200);
setInterval(TheColorEffect.change, 100);