浅谈JS中多并发的一些处理方法

1顶
0踩

2015-08-18 16:29 by 副主编 mengyidan1988 评论(1) 有9925人浏览

JavaScript

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

本文转自亚里士朱德的博客：http://yalishizhude.github.io/2015/08/18/js-async/

来自: 亚里士朱德的博客

分享到：

1
顶

0
踩

评论共 1 条请登录后发表评论

1 楼戢_时光 2015-08-19 12:32

js 还能并发？？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

浅谈Python接口对json串的处理方法

最近学习Python接口测试，对于接口测试完全小白。大概一周的学习成果进行总结。 1.接口测试：目前涉及到的只是对简单单一的接口进行参数传递，得到...2.5 Python对数据的处理模块可以使用urllib、urllib2模块或request

前端js嵌套遍历优化_浅谈JS中多并发的一些处理方法

js中多并发的一些处理方法经常在写代码的时候碰到这样的场景：页面初始化时显示loading页，同时启动多个ajax并发请求获取数据，当每个ajax请求返回时结束loading。举个例子，一个下订单的页面，要查询常用地址信息、...

浅谈js中多并发的一些处理方法

经常在写代码的时候碰到这样的场景：页面初始化时显示loading页，同时启动多个ajax并发请求获取数据，当每个ajax请求返回时结束loading。举个例子，一个下订单的页面...下面是一些解决方法和思路：并行改为串行

php和node高并发,浅谈node.js中高并发与分布式集群的内容

这篇文章给大家介绍的内容是关于浅谈node.js中高并发与分布式集群的内容，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Node特性：高并发在解释node为什么能够做到高并发之前，不妨先了解一下...

java webservice 高并发_浅谈WEB中的高并发

今天主要是对JAVA_WEB中高并发的概念及常见的处理手段做个基本介绍，后面会每个点都做详细的介绍及实现。何谓高并发高并发指的是：在同时或极短时间内，有大量的请求到达服务端，每个请求都需要服务端耗费资源进行...

浅谈es5如何保证并发请求的返回顺序

确实如此，那假如我们有20个，200个item呢，就会掉入回调地狱，还有一个问题就是前面的请求失败会导致后面的请求无法执行（即使后面的请求单独可用）那么此时我们就需要并发请求首屏加载的onload中同时请求两次 ...

浅谈高并发解决方案

浅谈高并发解决方案什么是高并发? 高并发（High Concurrency）通常是指通过设计保证系统能够同时并行处理很多请求。通俗来讲，高并发是指在同一个时间点，有很多用户同时的访问同一 API 接口或者 Url 地址。它...

浅谈JavaScript异步编程

在异步编程中，一条语句的执行不能依赖上一条语句执行完毕的结果，因为无法预测一条语句什么时候执行完毕，它与代码顺序无关，语句是并发执行的。例如以下代码： $.get($C.apiPath+'ucenter/padCharge/findMember'...

浅谈高并发业务系统设计

这些营销活动并发度比较高，此处整理一下一个高并发业务系统设计的一些方法论。（嗯...其实技术沉淀是我的一个KPI） 1、什么是高并发高并发是一种短时间内有大量请求到服务端的现象。对于这种现象，我们需要关注...

浅谈异步并发请求和请求合并

文章目录概述异步并发请求同步调用futureCompletableFuture请求合并概述在做业务系统需求开发中，经常需要从其他服务获取数据，拼接数据，然后返回数据给前端使用；常见的服务调用就是通过http接口调用，而对于...

浅谈js中的异步编程

JS异步编程模型在理解js异步编程时，我们先再心中想一下为什么js语言会引入异步任务？...所谓js中的任务，通俗点我们可以理解为等待运行的js代码（这里不搞那些专业术语），到此我们可以分为顺序...

浅谈高并发-前端优化

前言最近接到个任务，业务场景是需要处理高并发。原谅我第一时间想到的居然是前段时间阮一峰的博客系统遭到了DDoS攻击，因为在我的理解中，它们的原理是想通的，都是服务器在一定时间内无法处理所有的并行任...

Umi-OCR-main.zip

基于springboot+Web的毕业设计选题系统源码数据库文档.zip

基于springboot校外兼职教师考勤管理系统源码数据库文档.zip

58商铺全新UI试客试用平台网站源码

基于springboot大学生就业信息管理系统源码数据库文档.zip

基于SpringBoot的口腔诊所系统源码数据库文档.zip

工具变量上市公司企业银行贷款数据（2019-2024年）.txt

数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/T0620514/article/details/143956923

3-240P2162218.zip

1顶0踩