js页面请求中的异步问题

js页面请求中的异步问题

怒发！！一个小问题，但是由于没有注意到，导致浪费了很多时间，大家引以为鉴!!

    最近在写一个前台页面的时候，调用了jquery中的一个表格插件，表格插件中给出了一个名为dataTable的json变量，（别问我为什么不自己写表格 ，懒。好吧，不要懒，不要懒，不要懒，重要的事情说三遍，如果自己写表格的话，兴许这个问题不会困扰这么久）在js的代码中我调用ajax请求，后台使用struts返回json格式的数据，直接上图：

    此处，以为一切大功告成，可是发现页面表格中并没有成功地加载数据，笔者以为是后台action传回来的数据并不是标准的json格式，或者数据结构方面出了问题，便疯狂地在dataTable=data这一步之前对数据进行转换，什么JSON.parse啊，什么JSON.stringify()都试过，均未反应。后来尝试自己做了一个table_body.json的数据文件，放到后台文件中，在页面进行访问，发现如果直接访问本地文件的时候，表格中的数据则能成功加载。到此处更加迷惑了。在console中输出两种方式加载的dataTable，均能正常输出，而且数据一模一样。反正在此处是懵的。

    后来求救大神，大神毕竟是大神，看了两眼。丢出了一个js的数据异步概念，异步是啥？没听过。好吧，就以本案例讲解吧！先上一个官方概念：
    js异步：js是一个单线程的执行环境，即一次只能执行一个任务。如果有数个任务，那么这些任务会从上至下依次挨个执行。这种执行方式的好处是简单，实现也简单，缺点是这个如果有大量的任务，或者其中一个任务耗时时间很长，其他的任务暂时无法执行，就会造成浏览器无响应（俗称假死，卡死）。
针对这种情况，js出现了同步和异步的概念。”同步模式”就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；”异步模式”则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

    好吧！其实我也觉得太抽象，以我自己的代码为例，在前面截图中可以看到，我在页面渲染的过程中，用了两个ajax请求，第一个ajax请求从后台请求表格内容的数据，赋值给一个全局变量dataTable，在第二个ajax请求中，请求的是本地的table_head.json文件，也就是表头文件，在它的success函数里面，调用那个dataTable变量，和columName变量一起，将表格数据渲染到页面里面，这里问题就出现了，如果我将渲染页面的代码放到success函数里面，第二个函数加载的事本地的文件，明显速度较快，它加载完成之后就开始进行页面的渲染，此时远程加载数据的第一个ajax请求并没有完成，dataTable里面还没来得及有数据就渲染完成了，所以导致页面中只有表头，没有表格数据。

    这种情况多发生在有ajax请求的页面代码中，此时只需要将渲染页面的代码打包，在所有数据都加载完成之后，再调用统一渲染，其实问题是很好解决的。

    至此，问题是解决了，其实是一个很小的问题，但是很容易被忽略。望大家引以为鉴。