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封装好的一些常用操作
Jul 28 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue router 配置路由的方法
Jul 26 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
微信小程序实现倒计时功能
Nov 19 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/02 星际争霸
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
学习ExtJS table布局
2009/10/08 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
Python 求向量的余弦值操作
2021/03/04 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
学生请假条
2014/04/11 职场文书
情况说明书怎么写
2015/10/08 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle