<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
abc
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Scripts/first.js"></script>
<script src="Scripts/second.js"></script>
</body>
</html>
//first.js
$(document).ready(function () {
alert(first.firstChild.firstGrandChild);
})
//second.js
var first = {
firstChild: {
firstGrandChild: false
}
}
I have simplified the problem here. We have html page that has reference to two js-first and second. So i assume browser would render html first, stop to download first js, then download second js.
Then document ready of first js would be executed which will get first.firstChild.firstChildChild of second js.
I have few questions: What would be execution order of html execution, download js, document ready execution of fist js, document ready execution of second js (if it has doc ready)?
Now i am able to access these objects from first js but in very similar scenario in my production app, i get these as undefined sporadically. What could be possible reason for that?
If i have circular dependency b/w first and second js and i want things to functions smoothly, what should i do? (example fist js calling second js methods from document ready and from outsid doc ready too AND vice-versa)