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 相关文章推荐
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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
三种php连接access数据库方法
2013/11/11 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php session的锁和并发
2016/01/22 PHP
laravel学习教程之关联模型
2016/07/30 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
使图片旋转的3种解决方案
2013/11/21 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
精神病医院见习报告
2014/11/03 职场文书
我爱我班主题班会
2015/08/13 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript