JavaScript实现指定数量的并发限制的示例代码

更新时间：2020年03月10日 09:49:27 作者：陈大鱼头

这篇文章主要介绍了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)
})

OK，我们看到结果是如我们所愿的

到此这篇关于JavaScript实现指定数量的并发限制的示例代码的文章就介绍到这了,更多相关JavaScript 指定数量并发限制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

浅谈Javascript事件模拟
事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的
2012-06-06
js类定义函数时用prototype与不用的区别示例介绍
没有使用prototype的方法相当于类的静态方法，相反，使用prototype的方法相当于类的实例方法，不许new后才能使用
2014-06-06
JavaScript之事件循环案例讲解
这篇文章主要介绍了JavaScript之事件循环案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-07-07
js如何获取访问IP、地区、当前操作浏览器
这篇文章主要介绍了js如何获取访问IP、地区、当前操作浏览器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
JS求Number类型数组中最大元素方法
这篇文章主要介绍了如何用JS求Number类型数组中最大元素
2018-04-04
JavaScript中跨域问题的深入理解
这篇文章主要给大家介绍了关于JavaScript中跨域问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
JavaScript 完成注册页面表单校验的实例
下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
js精准计算
这篇文章主要介绍了js精准计算，对此感兴趣的同学，可以实验一下
2021-04-04
详解小程序如何避免多次点击，重复触发事件
这篇文章主要介绍了详解小程序如何避免多次点击，重复触发事件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
JS图片压缩的简单实现
本文主要介绍了JS图片压缩的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05