Как я могу обеспечить последовательную загрузку динамических ссылок в моем веб-приложении с помощью JQuery? ⇐ Jquery

[Гость]

В настоящее время я разрабатываю игру «Морские корабли» как веб-приложение с использованием Spring WebSocket. Я использую специальный ScriptLoader-Javascript для загрузки всех других JavaScript-скриптов, необходимых для моего основного HTML-кода. Пользовательские JavaScript-скрипты короткие и разделены, чтобы сделать весь скрипт более понятным. ScriptLoader выглядит следующим образом:

Код: Выделить всё

loadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");
loadScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",);
loadScript("https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js");
loadScript("https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.2/sockjs.min.js");

loadScript("/javascripts/gamescripts/ConstLoader.js");

window.onload = function (){
loadScript("/javascripts/gamescripts/VarLoader.js");
loadScript("/javascripts/gamescripts/SupportFunctions.js");
loadScript("/javascripts/gamescripts/SocketLoader.js");
loadScript("/javascripts/gamescripts/SubscribeFunctions.js");
loadScript("/javascripts/gamescripts/ButtonHandlers.js");
loadScript("/javascripts/gamescripts/FrontendHandlers.js");
loadScript("/javascripts/gamescripts/DnDHandlers.js");
loadScript("/javascripts/gamescripts/AutoPlaceFunctions.js");
loadScript("/javascripts/gamescripts/ResetFunctions.js");
loadScript("/javascripts/gamescripts/RotateFunctions.js");
}

function loadScript(pathOrUrl){
let script = document.createElement("script");
script.src = pathOrUrl;
document.head.appendChild(script);
}

Проблема, с которой я сталкиваюсь уже некоторое время, заключается в том, что скрипт "VarLoader.js", состоящий из динамических ссылок jquery, не загружает некоторые динамические ссылки правильно. Эта проблема проявляется, как только затронутый экземпляр начинает использовать какие-либо функции (кнопки, перетаскивание). Эта проблема возникает только в некоторых случаях моего веб-приложения, поэтому я не понимаю, почему это происходит. Вот мой скрипт "VarLoader.js" для справки (ссылки используются во всех следующих скриптах):

Код: Выделить всё

//defines board element references
var shipList = $(".draggableShip");
var ownDivs = $('.ownDiv');
var enemyDivs = $('.enemyDiv');
var ownBoard = $("#ownBoard");
var enemyBoard = $("#enemyBoard");

//defines button references
var readyButton = $("#readyButton");
var resetButton = $("#resetButton");
var autoPlaceButton = $("#autoPlaceButton");
var surrenderButton = $("#surrenderButton");
var rematchButton = $("#rematchButton");
var backButton = $("#backButton");

//defines dropdown element references
var dropdownButton = $("#dropdownButton");
var shipDropdown = $("#dropdownContent");
var gameRulesButton = $("#gamerulesButton");
var gameRulesDropdown = $("#gamerules");

//defines label parent div references
var winnerDiv = $(".winnerDiv");
var secondPlayerDiv = $("#secPlayerD");

//defines image references
var leftImage = $("#leftImage");
var rightImage = $("#rightImage");

//defines custom attributes
var readyToggle = false; //"active" property of the ready button
var rematchToggle = false; //*active* property of the rematch button
var enemyDivActive = new Array(100).fill(true); //property of the enemyDivs, that determine if they are clickable

Я пытался решить проблему, поместив сценарий "VarLoader.js" за пределы моей функции window.onload, я пытался отложить все следующие сценарии и Я также пытался загрузить все следующие скрипты в режиме попытки (отчаяние). Ошибка продолжала возникать время от времени, и я понятия не имею, как правильно загружать динамические ссылки. Пример возникающей ошибки выглядит следующим образом:

Код: Выделить всё

"ButtonHandlers.js 23:4" readyButton not defined

Источник: https://stackoverflow.com/questions/781 ... -using-jqu