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) {
    results.push(list.slice(i, i + max))
  }
  return results
}

这里就是根据指定的并发数量来分割数组。主要就是 for + slice ,这没啥好说的

接下来我们再来一个用 async + await 实现的请求集合封装。

我们通过 for...of 去遍历每一个异步函数,然后用 async + await 确保函数的执行顺序,再用 try...catch 来保证即使 reject 报错也不会导致无法继续执行任务。

const requestHandler = async (
  groupedUrl = [],
  callback = () => { }
) => {
  if (!groupedUrl.length) {
    callback()
    return groupedUrl
  }
  const newGroupedUrl = groupedUrl.map(fn => fn())
  const resultsMapper = (results) => results.map(callback)
  const data = await Promise.allSettled(newGroupedUrl).then(resultsMapper)
  return data;
}

接下来就是主函数

const sendRequest = async (
  urls = [],
  max = 0,
  callback = () => { }
) => {
  if (!urls.length) {
    return urls
  }
  const groupedUrls = group(urls, max)
  const results = []
  console.log('start !')
  for (let groupedUrl of groupedUrls) {
    try {
      const result = await requestHandler(groupedUrl, callback)
      results.push(result)
      console.log('go')
    } catch { }
  }
  console.log('done !')
  return results
}

这里就是利用了 for + async + await 来限制并发。等每次并发任务结果出来之后再执行下一次的任务。

我们执行下栗子:

const p1 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p1'))
const p2 = () => Promise.resolve(2)
const p3 = () => new Promise((resolve, reject) => setTimeout(resolve, 2000, 'p3'))
const p4 = () => Promise.resolve(4)
const p5 = () => new Promise((resolve, reject) => setTimeout(reject, 2000, 'p5'))
const p6 = () => Promise.resolve(6)
const p7 = () => new Promise((resolve, reject) => setTimeout(resolve, 1000, 'p7'))
const p8 = () => Promise.resolve(8)
const p9 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p9'))
const p10 = () => Promise.resolve(10)
const p11 = () => new Promise((resolve, reject) => setTimeout(resolve, 2000, 'p10'))
const p12 = () => Promise.resolve(12)
const p13 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p11'))
const p14 = () => Promise.resolve(14)

const ps = [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14]
sendRequest(ps, 3, ({reason, value}) => {
  console.log(reason || value)
})

OK,我们看到结果是如我们所愿的

到此这篇关于JavaScript实现指定数量的并发限制的示例代码的文章就介绍到这了,更多相关JavaScript 指定数量并发限制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • .net core如何在网络高并发下提高JSON的处理效率详解

    前言 现有的webapi一般都基于JSON的格式来处理数据,由于JSON是一个文本类的序列化协议所以在性能上自然就相对低效一些.在.net中常用Newtonsoft.Json是最常用的组件,由于提供简便基于完整的json的String方法使用起来非常方便:但也正是这原因导致Newtonsoft.Json在性能上一直被说慢,虽然Newtonsoft.Json提供Stream的方式来处理JSON不过想复用writer和reader还是需要一些应用技巧.如果需要在网络通讯中应用JSON,那在这里介绍一

  • Nodejs爬虫进阶教程之异步并发控制

    之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回答才会再加载一部分,所以说如果直接发送一个问题的请求链接,取得的页面是不完整的.还有就是我们通过发送链接下载图片的时候,是一张一张来下的,如果图片数量太多的话,真的是下到你睡完觉它还在下,而且我们用nodejs写的爬虫,却竟然没有用到nodejs最牛逼的异步并发的特性,太浪费了啊. 思路 这次的的爬虫是上次那个的升级版,不过呢,上次那个虽

  • 深入浅析NodeJs并发异步的回调处理

    这里说并发异步,并不准确,应该说连续异步.NodeJs单线程异步的特性,直接导致多个异步同时进行时,无法确定最后的执行结果来回调.举个简单的例子: for(var i = 0; i < 5; i++) { fs.readFile('file', 'utf-8', function(error, data){}); } 连续发起了5次读文件的异步操作,很简单,那么问题来了,我怎么确定所有异步都执行完了呢?因为要在它们都执行完后,才能进行之后的操作.相信有点经验的同学都会想到使用记数的方式来进行,但

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

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

  • Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)

    在 Node.JS 中进行端口扫描还是比较方便的,一般会有广播和轮询两种方式.即使用广播和扫描,使用广播发出的消息有时会被路由器屏蔽,所以并不可靠. 使用node.js中的net模块,可以直接尝试向目录主机的某个端口进行连接,如果能建立连接,则说明该地址存在服务器. var socket = new Socket() socket.connect(port, host) socket.on('connect', function() { //找到port 和 host 地址 }) 所以只要进行2

  • JavaScript多并发问题如何处理

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

  • 让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实现指定数量的并发限制的示例代码

    在网上看到这么一道题: 这道题跟鱼头这篇记录『什么是时间分片(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中layim之整合右键菜单的示例代码

    一. 效果演示 1.1.好友右键菜单: 1.2.分组右键菜单: 1.3.群组右键菜单: 二. 实现教程 接下来我们以好友右键菜单为例,实现步骤如下: 2.1.绑定好友右击事件: /* 绑定好友右击事件 */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 过滤非右击事件 if(3 != e.which) { return; } // 不再派发事件 e.stopPropagation(); var o

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

  • JavaScript 中判断变量是否为数字的示例代码

    简介 JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型.实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据.如果没有文档和一致性,我们在使用代码时并不总是知道变量的类型. 当我们期望一个变量是数字时,对字符串或数组进行操作可能会在代码中导致奇怪的结果.在本文中,我们将会介绍一些判断变量是否为数字的函数. 像"10"之类的数字的字符串不应被接受.在JavaScript中,诸如NaN,Infinity和-Infinity之类的特殊值也是数字类

  • Java利用Redis实现高并发计数器的示例代码

    业务需求中经常有需要用到计数器的场景:譬如一个手机号一天限制发送5条短信.一个接口一分钟限制多少请求.一个接口一天限制调用多少次等等.使用Redis的Incr自增命令可以轻松实现以上需求.以一个接口一天限制调用次数为例: /** * 是否拒绝服务 * @return */ private boolean denialOfService(String userId){ long count=JedisUtil.setIncr(DateUtil.getDate()+"&"+user

  • 使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "

  • JavaScript实现外溢动态爱心的效果的示例代码

    还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++

  • JavaScript使用表单元素验证表单的示例代码

    JavaScript的主要作用:验证表单 1最简单的表单验证-禁止空白的必填项目 1.1最简单的HTML结构 网站最基础的就是注册,它是一个系统的交互基础. 例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单列表的html结构</title> </head> <body> <form method=&qu

  • JavaScript 使用正则表达式进行表单验证的示例代码

    JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n

  • javascript通过className来获取元素的简单示例代码

    示例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

随机推荐