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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
VUE 自定义组件模板的方法详解
Aug 30 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脚本的10个技巧(8)
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
Javascript的闭包
2009/12/31 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python循环监控远程端口的方法
2015/03/14 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
如何清空python的变量
2020/07/05 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
气象学专业个人求职信
2014/03/15 职场文书
美术社团活动总结
2014/06/27 职场文书
股东合作协议书
2014/09/12 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
《小小的船》教学反思
2016/02/18 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android