jQuery $(document).ready() execution order:
Execute. ready() when all DOM elements of the page are loaded. Document. ready() is executed after the DOM structure has been drawn, without having to wait until the loading is complete.
If there is javascript code before. ready() executes, how will javascript execute?
The answer is to execute the javascript code before. ready() and then. ready().
The execution order of multiple $(document).ready() is not simply sequential execution, it also has some relationship with nesting hierarchy.
----------------------------------------------------------------------------------------------------------------------------------------------------------
1. Loading order: introducing the order in which tags < script /> appear,
The Javascript code on the page is part of the HTML document, so the order in which Javascript is loaded is the order in which the tag < script /> appears, and the external JS in the < script /> tag or introduced through src is executed in the order in which the statement appears, and the execution process is part of the document loading.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>No title 3</title> <script> alert("1-First execution"); </script> </head> <body onload="alert('3-Final execution');"> <script> alert("2-Then execute"); </script> </body> </html>
2. Global variables and functions defined by each script can be invoked by subsequent scripts.
Variable calls must be declared previously, otherwise the value of the variable obtained is undefined.
<script type="text/javscrpt">//<![CDATA[ alert(tmp); //Output undefined var tmp = 1; alert(tmp); //Output 1/]> </script>
3. In the same script, function definitions can appear after function calls, but if they are in two separate sections of code and function calls are in the first section of code, an undefined function error will be reported.
<script type="text/javscrpt">//<![CDATA[ aa(); //Browser Error /]> </script> <script type="text/javscrpt">//<![CDATA[ aa(); //Output 1 function aa() { alert(1); }//]]> </script>
4.document.write() writes the output to the location of the script document. After the browser parses the content of the document where documemt.write(), it continues to parse the content of the document.write().
Then proceed to parse the HTML document.
<script type="text/javascript">//<![CDATA[ document.write('<script type="text/javascript" src="test.js"><//script>'); document.write('<script type="text/javascript">'); document.write('alert(2);') document.write('alert("I am" + tmpStr);'); document.write('<//script>'); //]]> </script> <script type="text/javascript">//<![CDATA[ alert(3); //]]> </script> test.js The contents are as follows: var tmpStr = 1; alert(tmpStr);
The order of pop-up values in Firefox and Opera is: 1, 2, I am 1, 3
The order of pop-up values in IE is: 2, 1, 3, and browser error reporting: tmpStr is undefined
The reason may be that IE didn't wait to load Javascript code in SRC before executing the next line when it was in document.write, SO 2 pops up first.
And when the document.write('document.write('I am'+ tmpStr)') calls tmpStr, tmpStr is not defined, thereby reporting an error.
To solve this problem, we can use HTML parsing to parse an HTML tag, and then implement the next principle to split the code to achieve:
<script type="text/javascript">//<![CDATA[ document.write('<script type="text/javascript" src="test.js"><//script>'); //]]> </script> <script type="text/javascript">//<![CDATA[ document.write('<script type="text/javascript">'); document.write('alert(2);') document.write('alert("I am" + tmpStr);'); document.write('<//script>'); //]]> </script> <script type="text/javascript">//<![CDATA[ alert(3); //]]> </script>
So the order of output values of IE and other browsers is always: 1, 2, I am 1, 3
Summary: Under IE, when using Document.Write method to refer to JS files, JS files will be directly invoked before loading. Therefore, it is recommended that the referenced JS files be placed in a script block alone. Ensure that the referenced JS file is fully loaded before continuing to execute the following Document.Write content
5. Execution order of JS function with the same name
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> function aa() { alert('First aa') } </script> <title></title> </head> <body> <form id="form1" runat="server"> <br /> <input id="Button1" type="button" value="button" onclick="aa();"/> </form> </body> <script type="text/javascript"> function aa(s) { alert('Second aa'); } function aa(s) { alert('Last aa'); } </script> </html>
Click "botton" to execute the result: Last AA
After the function with the same name appears in js, you always call the last loaded function in the web page after calling the changed JS function.
The loading order of the above js in the page and the execution order of several jquery $(document).ready(), I hope to give you a reference, and I hope you can support more than 52 scripts.