Issue
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
Solution
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>
Answered By - jeremy-denis
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.