JS中事件的执行顺序和AJAX的异步

Posted 2020-09-19

     之前了解过异步和同步，知道同步是顺序执行，异步是同时执行，但是没有遇到过这种情况，不是很理解，这两天做项目突然遇到了，对这有了一个初步的认识。废话不多说，直接上要求。

 

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后，事件添加成功。

 

由于本人工作经验尚浅，难免有说的不周全的地方，还请见谅，如果各位有什么指教，欢迎在下方留言，希望一同共勉。