浅谈js中多并发的一些处理方法
发布在web前端到js全栈的成长之路2015年10月28日view:1735
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading。 举个例子,一个下订单的页面,要查询常用地址信息、商品信息、地市信息...而这些请求都是异步的,希望等到所有数据加载完成后再允许用户操作。 要实现这个场景容易碰到的一个问题就是多并发怎么控制?下面是一些解决方法和思路:


<!-- more -->

并行改为串行

如果业务逻辑本身是串行的,但是提供的请求方式又是异步的,可以考虑此方法。 但本场景显然不是这种情况,这样做大大降低了页面性能,延长了加载速度。

回调

只适合并发数少的情况,多层嵌套回调会让代码的可读性大大降低

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。


博客:http://yalishizhude.github.io 作者:亚里士朱德

评论
发表评论
暂无评论
WRITTEN BY
亚里士朱德
前端工程师,jsp工程师,大型国际oss项目开发经验,擅长开发PC网站以及微信应用。
TA的新浪微博
PUBLISHED IN
web前端到js全栈的成长之路

web前端和js后端以及数据库的知识整理

我的收藏