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

Question

[kuzubina]

Народ, подскажите плиз, есть две функции, к примеру doSomething() которая вставляет в dom дерево определенный html контент и нужно чтобы после того как эта функция сформировала струтктуру, запустить следом следующую функцию slickSlider() чтобы проинициализировать slick slider на этот контент. Как это сделать?

Внутри doSomething() вешается слушатель события load на window, где подгружаются внешние скрипты, изменяющие DOM.

spoiler

(function (d, s) {
  function delayedLoad23690() {
    var js, fjs = d.getElementsByTagName(s)[0];
    js = d.createElement(s);
    js.id = "OShotApi23690";
    js.src = "https://export.otpusk.com/api/session?access_token...";
    fjs.parentNode.insertBefore(js, fjs);
    js.onload = function () {
      js = d.createElement(s);
      js.id = "OShotGetData23690";
      js.src = "https://export.otpusk.com/js/view?id=23690";
      fjs.parentNode.insertBefore(js, fjs);
    };
  }
  if (window.addEventListener) {
    window.addEventListener("load", delayedLoad23690, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", delayedLoad23690);
  }
}(document, "script"));

Comments

[Andrew]

а причем тут асинхронность?

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

Какие из двух функций — асинхронны?

Answer 1

[Jason Leavers]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Или как выше описали упрощенный вариант: async/await

Answer 2

[nvdfxx]

Где у вас асинхронность? ХТМЛ для слайдера через аякс приходит?

const slider = document.querySelector('#slider')
const setSlider = async () => {
    try {
        const data = await fetch('url')
        slider.innerHTML(data.data.html_for_slider)
        slider.slick({...})
    } catch(e) {...}
}
setSlider()

Comments

[kuzubina]

нет, без аякса, эта функция подгружает контент
window.addEventListener("load", delayedLoad23690, false);

[nvdfxx]

kuzubina, в чем проблема тогда?

[kuzubina]

проблема в том, что slickSlider инициализируется в существующем dom дереве, а сейчас с помощью скрипта при загрузке добавляется новая структура и нужно подождать чтобы слик запускался после этого

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

kuzubina, что внутри delayedLoad?

[kuzubina]

Сергей Соколов,
токен, пару переменных и путь на сторонний скрипт где вся логика

(function (d, s) {
function delayedLoad23690() {
var js, fjs = d.getElementsByTagName(s)[0];
js = d.createElement(s);
js.id = "OShotApi23690";
js.src = "https://export.otpusk.com/api/session?access_token...";
fjs.parentNode.insertBefore(js, fjs);
js.onload = function () {
js = d.createElement(s);
js.id = "OShotGetData23690";
js.src = "https://export.otpusk.com/js/view?id=23690";
fjs.parentNode.insertBefore(js, fjs);
};
}
if (window.addEventListener) {
window.addEventListener("load", delayedLoad23690, false);
} else if (window.attachEvent) {
window.attachEvent("onload", delayedLoad23690);
}
}(document, "script"));

Answer 3

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

Upd. с учётом скрытых глубоко в комментах подробностей. Выяснилось, что сначала вешается слушатель события window load, который подгружает внешние скрипты некого API, которые неизвестно, что делают и вставляют в DOM некий контент.

Чтобы что-то своё выполнить только после того, как отработают эти неизвестные «чёрные ящики» со стороннего сайта, надо определить момент, когда они закончат делать, что задумано.

Если они сделаны нормально, в этот момент они эмитят какое-то событие. Слушателем такого события надо запускать slickSlider.

Если же до такой нормальной практики их разработчики не дошли, можно очень сильно заморочиться с mutationObserver – этот APi реагирует на изменения DOM. Надеюсь, известен HTML элемент, внутри которого появится загружаемый контент – тогда слушать надо на нём. И по событию изменения запускать слайдер.