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 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
javascript中length属性的探索
2011/07/31 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
js charAt的使用示例
2014/02/18 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JS中Location使用详解
2015/05/12 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
JS中递归函数
2016/06/17 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Python KMeans聚类问题分析
2018/02/23 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
培训科主任岗位职责
2014/08/08 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
客房领班岗位职责
2015/02/11 职场文书
董事长致辞
2015/07/29 职场文书
检讨书怎么写?
2019/06/21 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Redis 哨兵机制及配置实现
2022/03/25 Redis