Задержка промисами

[Nlk]

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

function delay(ms) {
      return new Promise(function (resolve, reject) {
        setTimeout(resolve, ms)
      });
    }



    delay(5000).then(function () {
      console.log("1")
    });
    delay(9000).then(function () {
      console.log("2")
    });
    delay(10000).then(function () {
      console.log("3")
    });
    delay(14000).then(function () {
      console.log("4")
    });
    delay(16000).then(function () {
      console.log("5")
    });

[рони]

Nlk,
Promise зачем?

[Nlk]

рони,

Для реализации последовательной анимации при загрузке страницы сайта. Я понял, спасибо. Промис тут не нужен для этого, оно и так будет реализовано.

[рони]

Nlk,
для данного кода не вижу разницы между

setTimeout(()=>console.log("1"), 5000);

и

delay(5000).then(function () {
      console.log("1")
    });

[SuperZen]

const obj = {
  5000: () => {
    console.log(1)
  },
  9000: () => {
    console.log(2)
  },
  // etc
}
Object.keys(obj).forEach(t => setTimeout(obj[t], t))

[Nlk]

рони,
Я изначально делал так.

setTimeout(function(){
            console.log("1");
            setTimeout(function(){
                console.log("2");
                setTimeout(function(){
                    console.log("3");
                    setTimeout(function(){
                        console.log("4");
                        setTimeout(function(){
                            console.log("5");
                        }, 2000);
                    }, 4000);
                }, 1000);
            }, 4000);
        }, 5000);

но так не хорошо и решил переписать с помощью промисов. А с промисами у меня не получилось вызывать последовательную задержку после выполнения предыдущей задержки. Поэтому я сделал с нарастающим временем

delay(5000).then(function () {
      console.log("1")
    });
    delay(9000).then(function () {
      console.log("2")
    });
    delay(10000).then(function () {
      console.log("3")
    });
    delay(14000).then(function () {
      console.log("4")
    });
    delay(16000).then(function () {
      console.log("5")
    });

[Nlk]

Теперь я понял что промис тут вообще не нужен.
Большое спасибо
SuperZen,
рони

[рони]

Nlk,
как я понимаю последовательность ...

const data = [
{ms : 5000, fn : () => console.log("1")},
{ms : 4000, fn : () => console.log("2")},
{ms : 1000, fn : () => console.log("3")},
{ms : 4000, fn : () => console.log("4")},
{ms : 2000, fn : () => console.log("5")}
];

data.reduce((promise, item) => {
  const {ms, fn} = item;
  return promise.then(() => new Promise((resolve, reject) => {
        setTimeout(()=> (fn(),resolve()), ms)
      }));
}, Promise.resolve());

[SuperZen]

const obj = [
  { time: 1000, foo: () => console.log(1) },
  {
    time: 500, foo: () => {
      console.log(2)
    }
  }
]
obj.reduce(async (p, { foo, time }) => {
  await p
  return new Promise(res => setTimeout(() => (foo(), res()), time))
}, Promise.resolve())

[Nlk]

рони,
Большое спасибо, изначально я стремился к данному варианту, но сделать этого не мог.

SuperZen,
Теперь, не уверен что мне нужен промис для загрузки разной анимации при старте. Больше склоняюсь к вашему первому варианту. Спасибо!

Или даже так, на моем уровне это более приемлемо

function delay(f, ms) {
            setTimeout(f, ms);
        }

        delay(function () {
            console.log(1)
        }, 5000);
        delay(function () {
            console.log(2)
        }, 9000);
        delay(function () {
            console.log(3)
        }, 10000);
        delay(function () {
            console.log(4)
        }, 14000);
        delay(function () {
            console.log(5)
        }, 16000);