一個老項目中，一個jsp文件中有很多個js文件，
現在要在頁面上的一個地方判斷一個狀態，因為一直找不到原來是在哪里修改的那個狀態，所以決定不找了，而是在比較靠前引入的一個js中定義一個全局變量，然后在這個js的 $(function(){}} 方法中通過一個ajax向后台獲取正確的狀態，然后在所有的js都加載完之后根據全局變量的值的狀態來修改頁面上的邏輯。
但是發現，全局變量被一個外部js修改賦值后，我在jsp頁面的最下面居然取不到修改過的值。
請教同事才發現原來原因是
任何一個js文件中的 $(function(){});方法中的代碼需要整個頁面（包括頁面上所有的內外js文件）都加載完成才會執行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 哈哈哈 <div id="chartmain" style="width:600px; height: 400px;"></div> </body> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <!-- 引入外部js文件 --> <script type="text/javascript" src="js/1.js"></script> <script> //打印全局變量 alert(HAHA); //結果是 1,不是 2 /** * 原因是在頁面中的script中的代碼是順序加載的，但是只是加載普通的變量，和方法定義， * 並不會執行任何一個js中（包括頁面內部script標簽中的）初始化方法 $(function(){...});中的代碼邏輯。 * 所以上面打印的時候打印的還是全局變量定義時的值 */ //要想獲取 在外部js 1.js 的初始化方法(可能是一個同步ajax)中重新給全局變量賦的值,可以用如下方法 $(function(){ //在js的初始化方法中修改全局變量的值為2 alert("修改后的值: "+HAHA); //結果2 }); </script> </html>
1.js代碼
//定義一個全局變量，賦值為1；
HAHA=1;
$(function(){
//在js的初始化方法中修改全局變量的值為2
HAHA = 2;
});