Как реализовать выполнение нескольких функций с задержкой?

Question

[HellWalk]

Есть несколько функций, их количество может меняться, необходимо, чтобы каждая из них выполнялась с определенной задержкой.

Если сделать так:

<h1 id="h1">Этот заголовок меняет цвет</h1>
    <script>
        window.onload = function(){
            setTimeout(Red, 1000);
            setTimeout(Green, 1000);
            setTimeout(Blue, 1000);
        }

        function Red() {
            var head = document.getElementById('h1');
            head.style.color = 'red';
        }
        function Green() {
            var head = document.getElementById('h1');
            head.style.color = 'green';
        }
        function Blue() {
            var head = document.getElementById('h1');
            head.style.color = 'blue';
        }
    </script>

То "визуально" выполняется только последняя функция (выполнение первых двух глаз не замечает), а как сделать так, чтобы каждая функция происходила с задержкой?

Update
Спасибо за ответы, но уточню задачу - нужен универсальный метод, который будет просто получать список имен функций, и исполнять их по очереди, с задержкой после каждой (или перед каждой, не важно).

Answer 1

[Stalker_RED]

Вы практически одновременно запускаете три таймера на одну секунду. секунда проходит и они практически одновременно срабатывают.
Можно поставить им разную задержку

setTimeout(Red, 1000);
setTimeout(Green, 2000);
setTimeout(Blue, 3000);

Или использовать setInterval, и показывать цвета по по очереди.

var i=0,
    timer = setInterval(()=>
        h1.style.color = ['red','green','blue'][i++] || clearInterval(timer)
    , 1000)

https://jsfiddle.net/m5qg1us9/

UPD: то-же самое, но в массиве функции:

var myFunctions = [Red, Green, Blue]

var i=0, timer = setInterval(()=>{
  if (i < myFunctions.length) myFunctions[i++]()
  else clearInterval(timer)
}, 1000)

https://jsfiddle.net/nk7gepjw/

Вариант с итератором: https://jsfiddle.net/zdcL58ho/

Comments

[HellWalk]

За последний пример отдельной спасибо - то, что нужно!

Answer 2

[Сергей]

Вы запускаете 3 таймера одновременно. Собственно, поэтому виден только 1 результат.
JS - асинхронный язык. Не забывайте.

window.onload = function(){
            setTimeout(Red, 1000);
        }

        function Red() {
            var head = document.getElementById('h1');
            head.style.color = 'red';

            // Вызываем при запуске функции
            setTimeout(Green, 1000);
        }
        function Green() {
            var head = document.getElementById('h1');
            head.style.color = 'green';

            // Вызываем при запуске функции
            setTimeout(Blue, 1000);
        }
        function Blue() {
            var head = document.getElementById('h1');
            head.style.color = 'blue';
        }

Вот как-то так вот :)

Comments

[Stalker_RED]

Лучше использовать для кода тег <code> вместо <blockquote>

[Сергей]

Stalker_RED: Точно, спасибо... А я еще думаю, че это он синтаксис не подсвечивает Оо

[HellWalk]

О таком варианте думал, хотя нужно более универсальное решение - независимого от имен и количества функций. Что-то вроде цикла, который делает задержку в конце (или начале) каждой итерации.

В любом случае, спасибо за пример

Answer 3

[Дмитрий Лузанов]

Пример, который можно немного модифицировать под ваши нужды.

Answer 4

[Aleksandr]

setTimeout?

Answer 5

[sta-ger]

А в чем проблема установить разное значение задержки для каждого из setTimeout-ов?

Comments

[HellWalk]

В том, что это пример, а в рабочей версии неизвестно сколько будет функций, и какие у них будут названия.

Будет просто приходить массив из функций, каждую из которых нужно запускать через секунду.

[sta-ger]

HellWalk:

var fnArr = [Red, Green, Blue]; //массив функций

for (var i = 0; i < fnArr.length; i++) {
    setTimeout(fnArr[i], i * 1000);
}