Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2019, 15:06
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

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

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")
    });
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2019, 15:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nlk,
Promise зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2019, 15:42
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

рони,

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

Последний раз редактировалось Nlk, 14.11.2019 в 15:50.
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2019, 15:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nlk,
для данного кода не вижу разницы между
setTimeout(()=>console.log("1"), 5000);

и
delay(5000).then(function () {
      console.log("1")
    });
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2019, 15:56
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

const obj = {
  5000: () => {
    console.log(1)
  },
  9000: () => {
    console.log(2)
  },
  // etc
}
Object.keys(obj).forEach(t => setTimeout(obj[t], t))
Ответить с цитированием
  #6 (permalink)  
Старый 14.11.2019, 15:58
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

рони,
Я изначально делал так.
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")
    });
Ответить с цитированием
  #7 (permalink)  
Старый 14.11.2019, 16:01
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

Теперь я понял что промис тут вообще не нужен.
Большое спасибо
SuperZen,
рони
Ответить с цитированием
  #8 (permalink)  
Старый 14.11.2019, 16:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

последовательное выполнение Promise
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());

Последний раз редактировалось рони, 14.11.2019 в 16:18.
Ответить с цитированием
  #9 (permalink)  
Старый 14.11.2019, 16:32
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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

Последний раз редактировалось SuperZen, 14.11.2019 в 16:54.
Ответить с цитированием
  #10 (permalink)  
Старый 14.11.2019, 16:43
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

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

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);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задержка ajax запроса arkadii_parovozov Общие вопросы Javascript 18 21.02.2017 17:46
Задержка перед появлением второго уровня меню esergion jQuery 4 01.07.2016 19:48
Задержка ответа return bartle96 AJAX и COMET 3 24.04.2013 09:20
задержка на реакцию .mouseenter dimon76 jQuery 14 25.11.2011 19:02
Задержка перед повтором проигрывания audio Андрей Параничев Firefox/Mozilla 1 20.10.2011 02:51