JS第3篇：如何实现在ajax请求中及时完成DOM元素的hide和show（操作与数据加载异步加载）

需求

客户要求对一个比较耗时的请求有预计时间和剩余时间提示

真实效果

实现思路

预计时间从后台接口中获取，通过ajax请求，在请求预计时间的ajax成功回调函数中，用js语句将预计结果html设置进去，同时创建一个每10毫秒刷新的setInterval，里面做–操作。
同时调用getData方法获取请求非常耗时的那个请求，在请求结束完后将这个loading通过hide隐藏，完成友好的提示作用

遇到的问题

由于是在一个按钮的操作中做了两次ajax，一次请求预计时间，同时在页面提示，一次请求非常耗时的getData操作，然而上面的实现思路会导致页面提示的倒计时在getData这个ajax请求成功后被停止，然后一段时间后才展示页面数据（由于数据量大，初始化需要一定的时间）。

我也不太清楚为什么会阻碍倒计时的进行，既然不明白也不去纠结怎么解决，况且这也不算什么坏事，起码是知道停止倒计时的时候getData请求已经返回数据了。现在的情况就是，停止倒计时到页面完全展示数据需要一定的时间，所以总不可能让页面卡死在倒计时停止的页面吧，那样也太不友好了，一个具有成熟的产品思维的程序员是不能干出这样的事情的！！！

所以，我决定在出现倒计时停止时候，将停止的预计时间和倒计时的提示信息隐藏掉，展示页面正在加载数据中的一个非（mei）常（sha）友（luan）好（yong）的提示语。于是乎，我就兴高采烈的做了这么一件事情，请看下面代码：

 $.ajax({
        url: request_url,
        type: 'post',
        dataType: 'json',
        //data: JSON.stringify({data:{status: "start"}}),
        data: jsonStr,
        cache: false,
        headers: {
            'Content-Type': 'application/json'  //multipart/form-data;boundary=--xxxxxxx   application/json
        },
        success: function (res) {
            if (res.code === 0) {
                console.log("执行隐藏和显示")
                $("#timeDetail").hide();
                $("#loading").show();
                //其他数据的初始化操作（耗时好几秒）
             }
        },
        error: function (res) {
        }      
   });      

对，我就简单在进入成功回调函数的第一步，就执行隐藏和显示操作
然而，理想很美好，现实很残酷，运行起来没反应，我捉摸了下html的情况，发现它是有执行的，但是在耗时操作完成后才触发，那我要他有何用？？？

解决思路

首先想到的方法就是异步，事实证明确实是个可行的方法。大家都知道，js的setTimeout函数就是异步的，因此，把这个套上setTimeout试试，不错，可以。等待一段时间后，可以个屁。

然后，再想办法，把耗时操作放在setTimeout中，给个10毫秒去执行。嗯嗯，不错，我看到个影子飘过去了。

最后，我把后面整个隐藏loading的div操作也加上setTimeout，完美解决！！！

最终代码

$.ajax({
        url: request_url,
        type: 'post',
        dataType: 'json',
        //data: JSON.stringify({data:{status: "start"}}),
        data: jsonStr,
        cache: false,
        headers: {
            'Content-Type': 'application/json'  //multipart/form-data;boundary=--xxxxxxx   application/json
        },
        success: function (res) {
            if (res.code === 0) {
                console.log("执行隐藏和显示")
                //隐藏倒计时提提示语
                $("#timeDetail").hide();
                //展示数据正在加载的提示语
                $("#loading").show();
                setTimeout(function(){
                	//其他数据的初始化表格的操作（耗时好几秒）
                }, 10);
             }
        },
        error: function (res) {
        }      
   });  
   setTimeout(function(){
   		//展示数据加载的div
        $("#content").show();
        //隐藏具有loading动画和提示语的div
        $("#spinner").hide();
        //这是避免倒计时在页面数据已经展示后，还在运行
        clearInterval(countTime);
   }, 300);