使用ajax php运行顺序,js异步ajax方法实现顺序执行(通过轮询方式)

1.问题描述

在使用ajax传送数据时总会遇到一个问题,即ajax顺序传输数据.

传统方法,一般是将ajax传递数据的async设为false,转为同步传输,一般可以保证对应的方法能按照上下文的顺序依次执行,对于网速较快且数据量较小的情况下,这么做完全没有问题.

但经常会遇到一种情况,数据量很大,或者在服务器后台的运算读取时间很长,导致ajax从发送到接收请求中间的经过时间较长(譬如1S以上,这个也受网速的影响),此时如果再设定为同步,用户就会感觉网页打开很卡(实际此时主页面可能已经加载完毕),带来很不好的用户体验.

此时就还是应当考虑使用异步ajax传输数据,所要解决的问题,就是如何保证异步ajax方法按照顺序执行.

2.解决思路

本文所描述解决策略,是利用setInternal()轮询函数.所有前置函数在ajax接收成功后设定一个标志位状态,setInternal中的函数参数将会轮询这些标志位状态,当确定状态为已完成状态之后,将会执行后行函数,以此类推.当所有后行参数执行完后,再销毁这个轮询函数.

3.演示代码

本代码中通过延时函数模拟ajax操作,以此方便大家测试.实际在使用ajax作为前置及后行函数时,该思路是完全没有问题的.

此代码的流程是:

先执行func3,func5;

待这两个前置函数执行完毕后再执行func4;

待func4执行完毕后,再执行func6.

//开始测试函数,可将此函数通过事件触发(如页面载入事件)

function test_(){

func3();

func5();

window.mAjaxFuncFlag=new Object();

var mSiFunc4=setInterval(function(){

if(window.mAjaxFuncFlag.func3&&window.mAjaxFuncFlag.func5){

func4();

clearInterval(mSiFunc4);

}

},100);//此处是当func3,func5执行完毕后,执行func4

var mSiFunc6=setInterval(function(){

if(window.mAjaxFuncFlag.func4){

func6();

clearInterval(mSiFunc6);

}

},100);//此处是当func4执行完毕后,执行func6

}

//模拟ajax函数3

function func3(){

setTimeout(function(){

showNowSec();

window.mAjaxFuncFlag.func3=true;

},3000);

}

//模拟ajax函数4

function func4(){

setTimeout(function(){

showNowSec();

window.mAjaxFuncFlag.func4=true;

},4000);

}

//模拟ajax函数5

function func5(){

setTimeout(function(){

showNowSec();

window.mAjaxFuncFlag.func5=true;

},5000);

}

//模拟ajax函数6

function func6(){

setTimeout(function(){

showNowSec();

window.mAjaxFuncFlag.func6=true;

},5000);

}

//打印当前秒数

function showNowSec(){

console.log(new Date().getSeconds());

}

4.待改进的地方

目前该策略能很好的解决一些比较简单的异步ajax顺序执行问题,但也存在着一些不足,列举如下(也许以后姿势水平高了之后可以找到更好的方案):

对于函数代码的侵入性较高.每个函数内部都有一个记录函数真正完成(对于ajax即是数据传输完毕)的标志位设置(如果已将ajax封装,可考虑在complete中加入标志位设置的代码,以此减少侵入性);

当方法数量较多时,轮询部分的代码将会比较复杂.此处可以考虑写封装函数.但以何种形式的参数引入,同样也是个有争议的问题,在没有比较好的方案确定下来之前就先不将代码放上来了.