JavaScript多并发问题如何处理


Posted in Javascript onOctober 28, 2015

经常在写代码的时候碰到这样的场景:页面初始化时显示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)
  }
}

第三方框架实现

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 + '已完成');
});

以上内容是小编给大家介绍的关于JavaScript多并发问题如何处理的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 #Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 #Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 #Javascript
jquery实现的动态回到顶部特效代码
Oct 28 #Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 #Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 #Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 #Javascript
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
简单谈谈favicon
2015/06/10 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php和asp语法上的区别总结
2019/05/12 PHP
PHP7 其他修改
2021/03/09 PHP
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Python 列表反转显示的四种方法
2020/11/16 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
音乐专业自荐信
2014/02/07 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
二人合伙经营协议书
2014/09/13 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
Android中的Launch Mode详情
2022/06/05 Java/Android