мигающий текст и закрытие

Question

Я хочу, чтобы текст на странице менял цвета каждые 2 секунды. Вот что у меня есть:

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);
}

А потом для CSS у меня есть это:

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

Проблема в том, что когда я смотрю на временную шкалу в chrome, я вижу, что использование памяти увеличивается и увеличивается каждые 2 секунды. Я подозреваю, что причина использования памяти постоянно увеличивается в том, что есть утечка памяти и что я создаю случайное закрытие.

Что не так с моим кодом?

Спасибо за ваши предложения.

Answer 1

Вы вызываете setTimeout из своей функции, таким образом добавляя в стек каждый вызов.

Вместо этого используйте интервальный вызов извне функции:

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

---

Вы можете дополнительно оптимизировать этот код следующим образом:

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

Здесь мы делаем 3 вещи по-разному:

1. Мы не запрашиваем DOM каждые 2 секунды для вашегоэлемент.Мы кешируем его один раз и используем повторно.
2. Также нет необходимости каждый раз создавать новый массив цветов.
3. Наконец, мы заключаем все это в самозаполняющуюся анонимную функциючтобы мы не загрязняли глобальное пространство имен этими переменными.