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)
  }
}

第三方框架实现

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多并发问题如何处理的相关知识，希望对大家有所帮助。

赞 (0)

相关推荐

  • Nodejs实战心得之eventproxy模块控制并发

    Nodejs实战心得之eventproxy模块控制并发

    目标 建立一个 lesson4 项目,在其中编写代码. 代码的入口是 app.js,当调用 node app.js 时,它会输出 CNode(https://cnodejs.org/ ) 社区首页的所有主题的标题,链接和第一条评论,以 json 的格式. 输出示例: [ { "title": "[公告]发招聘帖的同学留意一下这里", "href": "http://cnodejs.org/topic/541ed2d05e28155f24

  • 让JavaScript和其它资源并发下载的方法

    让JavaScript和其它资源并发下载的方法

    在IE6/7里JavaScript会从两个方面阻碍页面呈现: script标签下面的网页资源在script加载完之前会停止请求.下载. script标签下面的html元素在script加载完之前会停止渲染. 在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载: 虽然在ie8,safari4,chrome2下script可以并发,但依然阻碍了其他资源的下载: 有6种方法可以使script与其他资源并行下载: 1.XHR eval - 通

  • JavaScript多并发问题如何处理

    经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading. 举个例子,一个下订单的页面,要查询常用地址信息.商品信息.地市信息-而这些请求都是异步的,希望等到所有数据加载完成后再允许用户操作. 要实现这个场景容易碰到的一个问题就是多并发怎么控制?下面是一些解决方法和思路: 并行改为串行 如果业务逻辑本身是串行的,但是提供的请求方式又是异步的,可以考虑此方法. 但本场景显然不是这种情况,这样做大大降低了页面

  • JavaScript使用Promise实现并发请求数限制

    目录 没有Promise的并发请求 使用Promise限制并发请求 使用Promise实现并发请求数限制 总结 没有Promise的并发请求 在Web开发中,我们经常需要发起多个异步请求来获取数据.例如,我们可能需要从服务器获取一些用户信息.文章内容.评论列表等等.如果我们使用的是传统的JavaScript回调函数,可能会写出类似下面这样的代码: function getUsers(callback) { fetch('https://example.com/users', (response)

  • SQL Server并发处理存在就更新解决方案探讨

    SQL Server并发处理存在就更新解决方案探讨

    前言 本节我们来讲讲并发中最常见的情况存在即更新,在并发中若未存在行记录则插入,此时未处理好极容易出现插入重复键情况,本文我们来介绍对并发中存在就更新行记录的七种方案并且我们来综合分析最合适的解决方案. 探讨存在就更新七种方案 首先我们来创建测试表 IF OBJECT_ID('Test') IS NOT NULL DROP TABLE Test CREATE TABLE Test ( Id int, Name nchar(100), [Counter] int,primary key (Id),

  • 深入理解Node.js中的Worker线程

    深入理解Node.js中的Worker线程

    概述 多年以来,Node.js都不是实现高 CPU 密集型应用的最佳选择,这主要就是因为JavaScript的单线程.作为对此问题的解决方案,Node.jsv10.5.0 通过worker_threads模块引入了实验性的 "worker 线程" 概念,并从 Node.js v12 LTS 起成为一个稳定功能.本文将解释其如何工作,以及如何使用 Worker 线程获得最佳性能. Node.js 中 CPU 密集型应用的历史 在 worker 线程之前,Node.js 中有多种方式执行

  • JavaScript实现指定数量的并发限制的示例代码

    在网上看到这么一道题: 这道题跟鱼头这篇记录『什么是时间分片(Time Slicing)?』有点相似,但不同的是这次是限制异步并发的数量. 所以话不多说,我们先来康康实现 首先我们来实现一个分割数组的函数~ const group = (list = [], max = 0) => { if (!list.length) { return list } let results = [] for (let i = 0, len = list.length; i < len; i += max)

  • JavaScript/TypeScript 实现并发请求控制的示例代码

    场景 假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制 模拟 利用 setTimeout 实行简单模仿一个请求 let startTime = Date.now(); const timeout = (timeout: number, ret: number) => { return (idx?: any) => new Promise((resolve) => { setTimeout(() => { const compa

  • JavaScript如何利用Promise控制并发请求个数

    JavaScript如何利用Promise控制并发请求个数

    一.场景 假设现在有这么一种场景:现有 30 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果. 如图所示: 上图这样的排队和并发请求的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了. 二.串行和并行 串行:一个异步请求完了之后在进行下一个请求 并行:多个异步请求同时进行 串行举例: var p = function () { return new Promise(function (resolve, reje

  • javaScript如何处理从java后台返回的list

    事情: 从java后台返回List<String>类型数据,用于界面显示.但js中想获取它并操作它.直接使用EL表达式,js把它识别成字符串了.不是我想要的啊..网上搜了搜大家的解决方案...最好的当然是把List集合转成json格式传到界面上.这样js里面操作也简单,页面也没有影响. 解决: 将List<String> 转成json,传到界面.js中使用var arr = eval('${list}');将list转成js数组. 我的代码: 复制代码 代码如下: var keyL

  • javascript中如何处理引号编码&#034;

    1. <c:out value='${jxOrgJsonStr}' escapeXml="false"/> 2.或者使用innerText 直接接受${jxOrgJsonStr}的值,就不会被转义了. 有次一哥们在做fckeditor数据展示的时候,出现了html/css全部被展示了,看了下代码,他使用了document.getElementById('xxxx').innerText=xxxx 结果就是现实了所有的,应该是使用innerHTML,同样上面的引号问题也是这样

随机推荐