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


Posted in Javascript onMarch 10, 2020

在网上看到这么一道题:

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

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

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

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

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
node.js基础知识小结
Feb 26 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
vue中的使用token的方法示例
Mar 10 #Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 #Javascript
JS如何在数组指定位置插入元素
Mar 10 #Javascript
vue实现简单瀑布流布局
May 28 #Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 #Javascript
微信小程序用canvas画图并分享
Mar 09 #Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 #Javascript
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
thinkphp框架实现删除和批量删除
2016/06/29 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
详解在Python中处理异常的教程
2015/05/24 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
用python生成1000个txt文件的方法
2018/10/25 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
城管大队整治方案
2014/05/06 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
家长通知书家长意见
2014/12/30 职场文书