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插件之自动添加删除行功能介绍
Oct 14 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
echart简介_动力节点Java学院整理
Aug 11 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
深入理解js promise chain
2016/05/05 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
domReady的实现案例
2016/11/23 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python增加图像对比度的方法
2019/07/12 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python实现图片横向和纵向拼接
2020/03/05 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
三八妇女节超市活动方案
2014/08/18 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
新学期开学标语2015
2015/07/16 职场文书