So I have two functions in different files.
File 1 looks like this:
function 1() {
do something
}
window.addEventListener('load', () => {
1();
});
and file two looks like:
function 2() {
do something
}
window.addEventListener('load', () => {
2();
});
I want function 1 to run before function 2. Currently I do this by importing them like this;
<head>
<script src="file1">
<script src="file2">
</head>
The problem with this is it is quite fragile as if someone where to switch the imports then it would stop working, so I am asking if there is a better way of doing it to ensure that function 1 will be run before function 2(and no I can't put them in the same file).
Remove the event listeners from the JS files and wire up the events in the html file.
<head>
<script src="file1">
<script src="file2">
window.addEventListener("DOMContentLoaded", () => {
1()
2()
});
</head>
Better yet, load up the scripts at the end of the <body> which will help with faster load times of the raw html.
<head>
<!-- not much here -->
</head>
<body>
<!-- html -->
<script src="file1">
<script src="file2">
<script>
window.addEventListener("DOMContentLoaded", () => {
1()
2()
});
</script>
</body>