Как подождать пока скрипт загрузится?

Имеется функция, которая зависит от внешнего скрипта, скрипт используется редко, поэтому подгружаю его по мере необходимости.
По порядку:
1. Есть функция suggestions, она зависит от внешнего скрипта jquery.suggestions.min.js
2. Внешний скрипт зависит от jQuery

Как дождаться загрузки внешнего скрипта, перед выполнением функции?

Сейчас код выглядит так:

contactFormScripts();

/* Проверяем, что загружена jQuery, иначе ждем */
function defer(method) {
  if (window.jQuery) { method(); }
  else { setTimeout(function() { defer(method) }, 50); }
}

function contactFormScripts() {
	// Подключаем jQuery, если она еще не подключена
	if(!window.jQuery){
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    document.getElementsByTagName('body')[0].append(script);

  }

  // Подключаем внешний скрипт, он зависит от jQuery
  defer(function() {
		let script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.2/dist/js/jquery.suggestions.min.js';
    document.getElementsByTagName('body')[0].append(script);
    contactFormScriptsInit();
  });
}

/* Функция, которая зависит от внешнего скрипта */
function contactFormScriptsInit() {
  $("#city").suggestions({
********************************
});
}
  • Вопрос задан
  • 196 просмотров
Решения вопроса 2
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
const loadScript = (url, callback) => {
	const script = document.createElement('script');
	script.addEventListener('load', () => {
		callback();
	});

	script.src = url;

	document.body.append(script);
};

loadScript('SOME_URL', () => {
	console.log('Скрипт загружен');
});

const loadScript = url => new Promise(resolve => {
	const script = document.createElement('script');
	script.addEventListener('load', () => {
		resolve();
	});

	script.src = url;

	document.body.append(script);
});

loadScript('SOME_URL').then(() => {
	console.log('Скрипт загружен');
});
Ответ написан
Tolly
@Tolly Автор вопроса
Вопрос решил так, написал, чтобы не забыть

startFunc();

function startFunc() {

   // Подключаем jQuery, если она еще не подключена
   if(!window.jQuery) {
    const script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    // Слушаем, когда jQuery загрузится и загружаем внешний
    script.addEventListener('load', ()=> { scriptLoad(); });
    document.body.append(script);
  } else {
    scriptLoad();
  }

  // Загрузка внешнего скрипта
  function scriptLoad() {
		const script = document.createElement('script');
	  script.type = "text/javascript";
	  script.src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.2/dist/js/jquery.suggestions.min.js';
	  // Слушаем, когда загрузится внешний скрипт и запускаем функцию
	  script.addEventListener('load', ()=> { scriptInit(); });
	  document.body.append(script);
  }

	// Инициализация функции
	function scriptInit() { }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы