之前了解過異步和同步，知道同步是順序執行，異步是同時執行，但是沒有遇到過這種情況，不是很理解，這兩天做項目突然遇到了，對這有了一個初步的認識。廢話不多說，直接上要求。

1.項目要求：外部調用xml文件，然後JS動態生成下拉菜單，使多個文件同時使用此菜單，方便維護。

如圖，下面白色為以前的菜單，但是多個地圖都需要寫同樣的菜單比較麻煩，也不好修改，所以做一個xml文件，存儲菜單內容，然後多個地圖調用，容易修改，藍色部分菜單。

2.項目代碼：此處我使用的Jquery

addMenu(){
       $.ajax({
               url:...,
               type:‘get‘,
               ...
     })
}
$(‘document).ready(function(){
     addMenu();          //添加動態菜單
     loadView();          //添加地圖元素
})


//博客僅做簡單示範，諸位需要練習，可以私下填充代碼

3.出現問題：（1）並且藍色菜單總是在地圖加載之後，才加載出來。

因為AJAX是異步的，所以即使將添加下拉菜單函數寫在加載地圖之前，但是他總是在地圖之後顯示，即使添加回調函數也沒有用（本人親測）。

（2）菜單加載出來之後，下拉菜單中添加的事件不能生效。

下拉菜單的事件寫在加載地圖的函數中，但是添加id動態寫在ajax中。由於先加載地圖函數，後添加id，所以該事件沒有綁定到指定的內容上，因此沒執行。

同時在原生JS中，此情況會報錯，因為沒有找到指定的DOM，但是JQ中不會報錯。

4.解決方法：

addMenu(){
       $.ajax({
               url:...,
               type:‘get‘,
               async:false,
               ...
     })
}
$(‘document).ready(function(){
     addMenu();          //添加動態菜單
     loadView();          //添加地圖元素
})


//博客僅做簡單示範，諸位需要練習，可以私下填充代碼

將AJAX中的異步執行關閉掉（默認是開啟的），要求先執行AJAX後，事件添加成功。

由於本人工作經驗尚淺，難免有說的不周全的地方，還請見諒，如果各位有什麽指教，歡迎在下方留言，希望一同共勉。

JS中事件的執行順序和AJAX的異步