两个并行AJAX引发的业务思考？

电玩女神 2022-07-16 12:49 228阅读 0赞

## 事件的起因是：避免后台执行过慢影响页面显示效果 ##

*  在页面执行ajax进入后台执行**大量的算法处理和调用数据量十分大的接口时**，想比会导致回调过慢或者前端页面卡死的情况，这样十分影响用户体验和网页加载，而且后台执行到某一步产生错误信息的时候，十分容易导致ajax最后回调的是错误信息。  
    ![这里写图片描述][20161117220928515]
 *  要解决一个需求，大概就是利用php的fastcgi\_finish\_request()函数到达类似异步执行的效果（或者其他办法），就是ajax进入后台而马上回调success，而后的进程还是在执行，只是这样的话就不会影响前台的数据展示和刷新了。  
    （[如果不太了解整个函数的，请出门右拐][Link 1]）

这是fastcgi\_finish\_request（）使用的简单实例：  
假如前台ajax执行的url方法是schedule()……

public function schedule(){ 
    
            echo '我回调了噢';
            fastcgi_finish_request（）;
    
            echo '我在不断执行，只是你看不见！';
            //处理大量的数据和接口回调
            for(){
                *****
            }
            //处理大量的数据和接口回调
            file_put_contents($文件名, $传入参数);   //后面会提到
    }

![这里写图片描述][20161117221357925]

## 另一个需求又来了，这次是要在执行完第一个ajax后再不断执行一个ajax去查询前面文件中所保存的数据，并返回显示到前台已进度条的形式展示 ##

*  简单概括：要有个不断执行的ajax以表示进度条的数据。  
    （1）我首先想到的是前端计时器去不断访问后台的接口，并在数据到一个为”END”的值的时候就结束计时器。  
    
    
     *  但是这个方案实现起来并不是那么靠谱，因为ajax回调的时间和计数器每次的循环时间是很难统一的。
     *  有一个很严重的问题就是，**前端是不能同时执行多个ajax的**，也就是说，**你要执行下一个ajax的之前必须让前一个ajax完全执行后才能开始执行**  
        这是在内部执行的ajax

这是在前一个大的接口回调后执行的（后台接口含有fastcgi\_finish\_request（）的函数）后，再执行计时器

$.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，并且，每次回调之后都会执行自身

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

[20161117220928515]: /images/20220715/7b824a510e9b4631a8ff79831d130da7.png
[Link 1]: http://www.laruence.com/2011/04/13/1991.html
[20161117221357925]: /images/20220715/ee13352a8b03476a84d2d86dd86a3b6e.png