Как я могу обеспечить последовательную загрузку динамических ссылок в моем веб-приложении Battleships с помощью Spring W ⇐ 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);
}

The problem im encountering for some time now is, that the "VarLoader.js"-script, that consists of dynamic jquery references, doesn't load some of the dynamic references correctly. This problem manifests itself as soon as any functionality (buttons, drag-and-drop) gets used by the affected instance. This problem only occurs in some instances of my webapp, so i'm kind of confused about why it's occuring. Here's my "VarLoader.js"-script for reference (the references get used by all following scripts):

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

//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

I've tried solving the problem by placing the "VarLoader.js"-script outside of my window.onload function, i've tried to defer all following scripts and i've also tried to load all following scripts in a try-catch (despair). The error kept occuring occasionally and i have no idea how to load the dynamic references consistently correct. An example for an error thats occuring looks like this:

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

"ButtonHandlers.js 23:4" readyButton not defined

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