Question

I’m looking to make some text on the page change colors every 2 seconds. This is what I have:

function BlinkText() {

    var TheTextColors = ['red', 'white', 'blue'];
    var TheColor = Math.floor(Math.random() * 3) + 1;

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

    $('#TheText').css('color', TheTextColors [TheColor]);
    $('#TheText').css('opacity', TheOpacity);

    setTimeout(BlinkText, 2000);
}

And then for the css I have this:

#TheText{
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;}

The problem is that when I look at the timeline in chrome, I see the memory usage go up and up every 2 seconds. I suspect the reason memory usage continuously expands is that there’s a memory leak and that I’m creating an accidental closure.

What’s wrong with my code?

Thanks for your suggestions.

Answer 1

You are calling setTimeout from within your function, thus adding to the stack with each call.

Instead, use an interval call from outside the function:

function BlinkText() {

    var TheTextColors = ['red', 'white', 'blue'];
    var TheColor = Math.floor(Math.random() * 3) + 1;

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

    $('#TheText').css('color', TheTextColors [TheColor]);
    $('#TheText').css('opacity', TheOpacity);
}

setInterval(BlinkText, 2000);

---

You can further optimize this code as follows:

var BlinkText = (function() {

    var TheTextColors = ['red', 'white', 'blue'],
        $element = $('#TheText');

    return function()
    {
        var TheColor = Math.floor(Math.random() * 3) + 1,
            TheOpacity = (Math.floor(Math.random() * 20) + 80) / 100;

        $element.css({
            'color': TheTextColors[TheColor],
            'opacity': TheOpacity
        });
    };
}());

setInterval(BlinkText, 2000);

We’re doing 3 things differently here:

1. We’re not querying the DOM every 2 seconds for your element. We cache it once, and reuse that.
2. There’s also no need to create a new colors array every time.
3. Finally, we’re wrapping the whole thing in a self-executing anonymous function, so that we don’t pollute the global namespace with those variables.