Как правильно создать глобальный стейт чего угодно на чистом js?

Question

[godsplane]

Например у меня на сайте есть некая функция. Я хочу запустить другую функцию когда первая полностью завершиться.
При этом я хочу из любого файла получить знание что функция уже завершилась или еще нет.
Я понимаю что скорее всегоэ то можно сделать через промисы, но у меня задача это простой прелоудер , после анимации которого надо запустить другую анимацию.
Нужны ли здесь промисы?

Comments

[Сергей Соколов]

почему бы не вызывать другую в самом конце первой?
Если так нельзя, то известно ли, как долго «играет» первая? – Вторую можно запустить через setTimeout(animation2, 3000); через 3 секунды.
Промисы – это спортивно модно современно и удобно, по-моему.

[Сергей Соколов]

Как выглядит первая долгоиграющая функция? За счёт чего она "долгая" ?

[godsplane]

Сергей Соколов, за счет window.onload + setTimeout + gsap.animations

[godsplane]

godsplane, Сергей Соколов,

const preloader = document.querySelector('.preloader');
const preloaderLogo = document.querySelector('.preloader .logo__src');
let preloaderIsDone = false;
const heroContent = document.querySelector('.hero__content');
window.addEventListener('load', () => {
  setTimeout(() => {
    if (preloader) {
      const tl = gsap.timeline();
      tl.to(preloader, {
        yPercent: -100,
        duration: 1,
        ease: CustomEase.create('cubic', '0.96, 0.02, 0.34, 0.99'),
      });
      tl.to(
        preloaderLogo,
        {
          duration: 1,
          yPercent: -100,
        },
        '<'
      );
      tl.fromTo(
        heroContent,
        {
          backgroundSize: '130%',
          backgroundPosition: 'center center',
        },
        {
          duration: 1,
          backgroundSize: '100%',
        },
        '='
      );
      tl.then(() => {
        preloaderIsDone = true;
      });
    } else {
      preloaderIsDone = true;
    }
  }, 2000);
});

if(preloaderIsDone) {
  alert('k')
}

Это выглядит как то так сейчас.Не знаю насколько это норм решение. но все другие анимации я хочу запускать после того как прелоадер проиграет.

[ksnk]

let preloaderIsDone = ()=>{
alert('k');
}
...
// везде вместо preloaderIsDone = true;
preloaderIsDone();

?

[godsplane]

ksnk, это не даст желаемого результата, если вызову другую фнукцию после этой она вызовется сразу

[Сергей Соколов]

godsplane, так вот же, .then() у вас выполняется по окончании прелоадера.
Там и ставьте таймаут или немедленный запуск следующего действа.

tl.then(() => {
  preloaderIsDone = true;
  nextAnimationStart(); // или как там у вас
});

[godsplane]

Сергей Соколов, ну да, но это then от либы.в чистом жсе он не сработает

[Сергей Соколов]

godsplane,

все другие анимации я хочу запускать после того как прелоадер проиграет.

ну вот надо что-то сделать по окончании проигрывания, или если понятно, что играть не будем, т.к. нет элемента preloader на странице. В приведенном фрагменте кода – в тех двух местах, где сейчас preloaderIsDone = true; надо вместо этого вызывать следующую анимацию.
Просто установка переменной-то она ничего не даст – её же никто не проверяет снова и снова.