一個示例搞明白使用JQuery.ready、JQuery.getScript方法和window.onload方法，頁面引入指令碼的執行順序
阿新 • • 發佈：2021-02-03
技術標籤：JavaScriptjavascriptjsjquerywebdom
haha.js這裡給個大迴圈用於判斷dom載入js後馬上執行還是稍後執行
for(var i=0;i<1000000000;i++){}
console.log(0);
test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>這只是一個測試</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> console.log(1); var ele=document.createElement('script'); ele.type="text/javaScript"; ele.src="C:\\Users\\Administrator\\Desktop\\haha.js"; var heads = document.getElementsByTagName("head"); heads[0].appendChild(ele); </script> <script> console.log(2); $.getScript("C:\\Users\\Administrator\\Desktop\\haha.js",function(){console.log(5)}); $(document).ready(function(){ console.log(4); }); console.log(3) window.onload=function(){ console.log(6); } </script> <script src="C:\\Users\\Administrator\\Desktop\\haha.js"></script> </head> <body> <p>這是一個段落</p> </body> </html>
當電腦使用chrome瀏覽器訪問test.html時會發現輸出為：
- 可見文件頁面在完全載入之前，指令碼的執行順序是至上而下的。
- 同時不管是使用document.createElement(‘script’)方式動態載入指令碼還是通過$.getScript方式載入，總之他們的執行順序都是在$(document).ready呼叫的方法之後，說白了$(document).ready呼叫的方法內部不能使用以上兩種動態載入的js內部定義的方法。
- 而他們之間的執行順序是誰先呼叫誰先執行比如本例中document.createElement(‘script’)引入的指令碼要在$.getScript引入的指令碼之前執行。
- 但是可以發現不管是動態載入的js還是初始頁面裡的js，window.onload方法總是最後執行。