本文共 2362 字，大约阅读时间需要 7 分钟。

避免后台执行过慢影响页面显示效果

在执行完第一个ajax后再不断执行一个ajax去查询前面文件中所保存的数据，并返回显示到前台

简单概括：要有个不断执行的ajax以表示进度条的数据

（1）我首先想到的是前端计时器去不断访问后台的接口，并在数据到一个为”END”的值的时候就结束计时器。 

但是这个方案实现起来并不是那么靠谱，因为ajax回调的时间和计数器每次的循环时间是很难统一的。

有一个很严重的问题就是，前端是不能同时执行多个ajax的，也就是说，你要执行下一个ajax的之前必须让前一个ajax完全执行后才能开始执行 

function good(){     $.ajax({            type:"post",            data:{},            async:true,            url:"**我是不断访问后台文件的接口**",            success:function(data){                    console.log(data);            }             })}   $.ajax({            type:"post",            data:{},            async:true,            url:"**我是访问大量数据，并把数据存数据存到文件中的接口**",            beforeSend: function()            {                console.log("最开始的执行！");                time=setInterval(good,1000);            },            success:function(data){                console.log(data);                console.log("执行成功！");            }，                complete:function(){//                clearInterval(time);                console.log("执行结束！");            },        })

这是在前一个大的接口回调后执行后，再执行计时器

$.ajax({            type:"post",            data:{            },            url:"**我是很多数据的接口**",            async:true,            success:function(data){                //我会立即回调，因为后台执行了fastcgi_finish_request                console.log(data);            }        });    var time=setInterval(function(){          $.ajax({            type:"post",            data:{},            async:true,            url:"**我是不断访问**",            beforeSend: function()            {                console.log("最开始的执行！");            },            success:function(data){                console.log(data);                 if(data==**){                  clearInterval(time);                }                console.log("执行成功！");            }，                complete:function(){                console.log("执行结束！");            },        })    },1000);

（2）第二个方案原理是使用递归，每次都只执行一次的ajax，并且，每次回调之后都会执行自身

function ajax(){        console.log("我在不断执行");        $.ajax({            type:"post",            data:{            },            url:"**这是我不断访问后台文件得到数据的接口**",            async:true,            success:function(data){                console.log(data);                ajax();   //我又回去执行自己                //利用读取的后台数据处理进度条事件            }        });    }

最后我使用第二种办法，成功解决了进度条所产生的不断访问后台数据，而又不会卡死页面的效果，还有一个值得一提：把不断变化的值放到文件中，读取并写入文件，可以更好的处理前后台数据的传递。

转载地址：http://diesi.baihongyu.com/