Можно ли дождаться загрузки JS файла перед выполнением кода?

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

function when_external_loaded (callback) {
    if (typeof callJsMethod === 'undefined') { // Проверяем, есть ли такая функция
        setTimeout (function () { // Если нету, ждем 500 мс.
            when_external_loaded (callback);
        }, 500); // wait 500 ms
    } else { callback (); } // Если есть, запускаем
} 

when_external_loaded (function () { // Запускаем функцию, которая будет проверять, загрузился ли файл
    callJsMethod(); // Функция с внешнего js файла
});

Другой из способов избежать этой проблемы — использовать асинхронную загрузку внешнего файла перед запуском функции, например, с помощью метода XMLHttpRequest() или fetch().

Вот пример использования fetch():

fetch('file.js')
  .then(response => {
    if (response.ok) {
      return response.blob();
    }
    throw new Error('Network response was not ok.');
  })
  .then(myBlob => {
    // тут вызываем функцию, использующую содержимое загруженного файла
    myFunction(myBlob);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Здесь мы используем метод fetch() для загрузки внешнего файла ‘file.js’. После успешной загрузки файла мы вызываем функцию myFunction(), передавая ей содержимое файла в качестве аргумента. Если при загрузке файла происходит ошибка, мы ловим ее с помощью метода catch() и выводим сообщение об ошибке в консоль.

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