在写一个项目时遇到一个问题。
问题是这样的，点击切换到A TAB页时，需要通过ajax加载数据，然后用highchart图表进行显示。由于数据加载较多，要等待上几秒，所以打算加个loading的样式，使用户体验良好。
使用了模态框的形式，载入一张loading的gif图片。
$(".tab").click(function(){
$("loadingModal").modal("show");
执行ajax1；
执行ajax2；
})
本来以为按照预想的显示，但是实际上，只在ajax2请求完之后才短暂地显示了模态框。
后来查资料后，才发现其中的问题，
由于设计需要，两个ajax请求都设为同步。
即，async:false;(true的话即为异步)
如果ajax请求设为同步，则在发送ajax请求后，页面会出现假死，无法与用户交互，直到ajax请求完毕后网页才会恢复。也就是问题中，为什么等到ajax2执行完毕之后，我的模态框才弹出loading样式。
如果async:true，则为异步请求。发送ajax后，不用等待请求完毕，便可继续执行以下的操作。
由于设计需要，ajax必须为同步，但是如何在同步状态下显示loading字样，还需要继续想办法
后来为了完成该需求还是做了一些解决方法。
查资料后发现，当我们ajax请求设置为同步的时候，UI绘制线程会被挂起，主线程用于通过ajax读取数据。知道ajax返回数据后UI线程才能恢复工作状态。
我的解决方法还是绕不过这个点。只能变通，需要互相依赖的ajax就让他们先后执行。比如，Bajax需要从Aajax中获得数据再请求，那么就将Bajax的执行放在Aajax的success函数中。
虽然实际上没有解决ui线程与主线程的问题，但在一定程度上还是绕过了这个坑。至于这个怎么解决，等待再次查资料
网友评论