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 firefox兼容ie的dom方法脚本
May 18 Javascript
javascript 数组的方法集合
Jun 05 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
js实现验证码功能
2020/07/24 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书