Как можно оптимизировать этот код javascript?

Question

[Tonako]

Подскажите как сделать его красивее

var usd_td = document.getElementById(\'get_usd\'); usd_td.style.color = \'#eee\'; setTimeout(function() { usd_td.style.color = \'#ccc\';setTimeout(function() { usd_td.style.color = \'#aaa\';setTimeout(function() { usd_td.style.color = \'#999\';setTimeout(function() { usd_td.style.color = \'#777\';setTimeout(function() { usd_td.style.color = \'#444\'; }, 40); }, 40); }, 40); }, 40); }, 40);

Comments

[Назар Мокринский]

Отформатируйте, читать невозможно

Answer 1

[Сергей Мельников]

#get_usd {
    color: #444;
    -webkit-animation: blink .3s;
    -moz-animation: blink .3s;
    animation: blink .3s;
}
@-webkit-keyframes blink { from { color: #eee } }
@-moz-keyframes blink { from { color: #eee } }
@keyframes blink { from { color: #eee } }

Comments

[Tonako]

а как активировать такой css event?

[Alex Pts]

Добавление класса элементу, в js добавили класс - мигает, сняли класс - нет css

Answer 2

[bredmm]

var usd_td = document.getElementById('get_usd'); 
colours = ['#eee', '#ccc', '#aaa',  '#999', '#777', '#444'];
setColour();
function setColour() {
    usd_td.style.color = colours.shift();
    console.log(colours)
    if (colours.length != 0) {
        setTimeout(setColour, 40)
    }
};

Comments

[Павел Рыбин]

Не надо проверять colours.length на неравенство нулю. Равенство нулю - это уже false.

[bredmm]

если человек не может написать такой код вы думаете для него это будет очевидно? код должен быть понятен тому кто его читает, если Вы гонитесь за количеством символов можно было вообще без if написать а с &&

[Артур Смирнов]

Рекурсивная установка таймаута - не самое лучшее решение. Я бы сделал через setInterval/clearInterval. Хотя, полагаю, тут имеет место логическая ошибка, поскольку код не выполняет нужных действий с первого раза.