js异步ajax方法实现顺序执行(通过轮询方式)


1.问题描述

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

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

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

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


2.解决思路

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


3.演示代码

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

  1. 先执行func3,func5;
  2. 待这两个前置函数执行完毕后再执行func4;
  3. 待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顺序执行问题,但也存在着一些不足,列举如下(也许以后姿势水平高了之后可以找到更好的方案):

  1. 对于函数代码的侵入性较高.每个函数内部都有一个记录函数真正完成(对于ajax即是数据传输完毕)的标志位设置(如果已将ajax封装,可考虑在complete中加入标志位设置的代码,以此减少侵入性);
  2. 当方法数量较多时,轮询部分的代码将会比较复杂.此处可以考虑写封装函数.但以何种形式的参数引入,同样也是个有争议的问题,在没有比较好的方案确定下来之前就先不将代码放上来了.

本文发表于2017年12月07日 14:33
(c)注:本文转载自https://my.oschina.net/yangyishe/blog/1586196,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 210 讨论 0 喜欢 0

讨论

周娱

君子和而不同
按照自己的方式,去度过人生

4181 1125872
抢先体验

扫码体验
趣味小程序
文字表情生成器

加入组织

扫码添加周娱微信
备注“加入组织”
邀请进开发群

闪念胶囊

人生是一场马拉松,起跑的优劣对于整段路途而言并没有那么重要,笑到最后的都是一直在跑的人,也就是一辈子都在学习的人。

角色是谁并不重要,重要的是会不会抢戏~

在这个世界上,最顶级的趋势叫时代。次一级的趋势才是经济周期,再往下是你所在的单位和公司的经营节奏。一个人赶不赶得上好时代得看运气,但要在好时代里不留下遗憾,得靠见识。

2009年,雷军40岁生日这天,他和几个朋友一起喝酒。雷军感慨,“人是不能推着石头往山上走的,这样会很累,而且会被山上随时滚落的石头给打下去。要做的是,先爬到山顶,随便踢块石头下去。”

离职要果断,入职要缓慢。

这一生,会遇到很多人,经历很多事,得到很多,也会失去很多。但无论如何,有两样东西,绝不能丢弃,一个叫良心,另一个叫理想。

数据结构和算法这个东西,如果你不去学,可能真的这辈子都用不到,也感受不到它的好。但是一旦掌握,你就会常常被它的强大威力所折服。之前你可能需要费很大劲儿来优化的代码,需要花很多心思来设计的架构,用了数据结构和算法之后,很容易就可以解决了。

人生路上,我们会遇到很多的坎。跨过去,你就可以成长,跨不过去就是困难和停滞。而在后面很长的一段时间里,你都需要为这个困难买单。

晚上在理发店烫了个头,本来想烫成陈奕迅的样子,但是最后成了黄渤 ( ̄﹏ ̄)~~~自行脑补

Copyright © 2016 - 2018 Cion.
All Rights Reserved.
备案:鲁ICP备16007319号.