最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js中多并发处理方法实录
时间:2015-10-28 编辑:简简单单 来源:一聚教程网
页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading。 举个例子,一个下订单的页面,要查询常用地址信息、商品信息、地市信息...而这些请求都是异步的,希望等到所有数据加载完成后再允许用户操作。 要实现这个场景容易碰到的一个问题就是多并发怎么控制?下面是一些解决方法和思路:
并行改为串行
如果业务逻辑本身是串行的,但是提供的请求方式又是异步的,可以考虑此方法。 但本场景显然不是这种情况,这样做大大降低了页面性能,延长了加载速度。
回调
只适合并发数少的情况,多层嵌套回调会让代码的可读性大大降低
function async1(){
//do sth...
}
function async2(){
//do sth...
async1();
}
async2();
ajax改为同步
如在jquery中将async参数设置为false
$.ajax({
url:"/jquery/test1.txt",
async:false
});
设置结束标识
简单一点的可以设置计数器,每完成一个异步函数加1,或者设置一个数组,每执行完一个异步函数更新数组。
回调计数
var cnt = 0;
function async1(){
//do sth...
callback();
}
function async2(){
//do sth...
callback();
}
function callback(){
cnt++;
if(2==cnt) console.log('都已执行完毕');
}
循环阻塞
var cnt = 0;
function async1(){
//do sth...
cnt++;
}
function async2(){
//do sth...
cnt++;
}
while(2>cnt){}
循环非阻塞
不建议过多使用,以免影响性能
var cnt = 0;
function async1(){
//do sth...
cnt++;
}
function async2(){
//do sth...
cnt++;
}
var interval = setInterval(function(){
if(2===cnt){
console.log('已执行完成');
clearInterval(interval)
}
}, 0);
第三方框架实现
jquery
目前我在项目中采用的方式
var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
d1.resolve( "Fish" );
}
function async2(){
d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 + v2 + '已完成');
});
angular
可以参考API文档中关于$watch的说明,$q服务也可以实现promise。
如果在js文件里定义一个全局变量,会有并发访问这个变量,导致数据混乱的情况出现吗?
js一般情况下不会有并发问题,因为js都是针对单个用户在执行,除非你的js代码里同时启动多个函数,去访问这个变量,比如:
setTimeout(函数1, 1000)
setTimeout(函数2, 1000)
-
上一个: tab切换实现的几种方法及示例
相关文章
- 可以使用多个jsp定制标签在JSP中达到接近servelt的处理效果 01-12
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31