Как синхронизировать внешнюю асин c javascript загрузку

Question

В моем приложении. js Я делаю что-то вроде этого:

load(src) {
  script = document.createElement('script');
  script.src = src;
  script.async = true;

  document.head.appendChild(script);
}

for (var i=0; scripts.length; i++) {
  load(scripts[i])
}

callback();

Все сценарии извлекаются с флагом asyn c. Я хочу выполнить callback только когда все сценарии загружены, как я могу это сделать?

Answer 1

Я бы использовал Promises для управления состоянием и Promise.all для проверки загрузки всех сценариев.

function load(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.onload = resolve;
    script.onerror = reject;
    script.async = true;
    script.src = src;
    document.head.appendChild(script);
  });
}

Promise.all(scripts.map(load)).then(callback);