I have an HTML page that i ship to the browser and it contains a couple of script tag.
This is my index.html file:
<body>
<div id="app"></div>
<script src="src/index.js"></script>
<script>
window.test = true;
</script>
</body>
</html>
And this is my src/index.js file:
<script>
const test = () => {
if (window.test) {
console.log("wow!");
}
};
test();
</script>
In the HTML file, i define window.test after i run the src/index.js.
src/index.js will only print to the console if window.test is set to true, but that's being set only after, as the second script.
What is the order in which these scripts will run?
Is there a guarantee that window.test will always be set to true "just in time" for the if statement in src/index.js to print wow!?
CodeSandbox: https://codesandbox.io/s/javascript-forked-utgh8?file=/index.html
In JS called from HTML file the order of the scripts are just like their order of writing in this file "always" will be in that order, which means that in your example window.test Will always have a null value in index.js so nothing will be printed in the console
to guarantee that test function is only call after variable is setted why not use a custom event
<script src="src/index.js"></script>
<script>
window.test = true;
const event = new Event('test-setted');
document.dispatchEvent(event);
</script>
and in index.js
<script>
const test = () => {
if (window.test) {
console.log("wow!");
}
};
document.addEventListener('test-setted', function (e) {
test();
}, false);
</script>