浅谈js中多并发的一些处理方法
jopen
9年前
用户操作。
要实现这个场景容易碰到的一个问题就是多并发怎么控制?下面是一些解决方法和思路:
并行改为串行
如果业务逻辑本身是串行的,但是提供的请求方式又是异步的,可以考虑此方法。
但本场景显然不是这种情况,这样做大大降低了页面性能,延长了加载速度。
回调
只适合并发数少的情况,多层嵌套回调会让代码的可读性大大降低
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的说明。
来自:http://yalishizhude.github.io/2015/08/18/js-async/