控制并发执行的解决方法(队列控制类)

前言

之前我有一篇文章(组件阅后即焚?挂载即卸载!看完你就理解了 - 掘金 (juejin.cn))提到了,工作生涯接到过一个需求是批量导出学生二维码,其中有个问题在于使用html2canvas时,会同时产生大量canvas标签占用内存导致页面卡顿甚至崩溃的问题。

思路

其实很简单,最大的原因是同时存在过多的canvas标签,占用了过多的内存,而同样作为一个热门的第三方库,html2canvas其实会主动删除自己复制的dom元素,但在并发量过的情况下,释放的速度比不上生成的速度,所以会出现问题。

那么解决方案也就是控制它的生成速度,以保障释放速度在承受范围之内。

但这里很有意思的一点是,不同电脑的承受范围是不一样的,不同的canvas占用的内存也是不一样的,所以如何控制这个量是要自己掌握的。

像一些不好掌握的情况,我的建议是直接服务端整一个服务专门用来批量执行这样的任务。

当然了,这里我们直接写个最简单易懂的方案来做就好了,控制并发量。

编程!启动!

众所周知,JS是世界上最好的语言(bushi)

hhhhh,玩个梗。

那么,为了通用,所以我们还是会以一些比较好用的方式也来设计这个东西,就决定用类class来做这个方案的载体。也就是并发队列控制类

这里我就直接放上代码,供大家参考了

js 复制代码
class ConcurrencyControllerQueue<T> {
  activeCount: number
  values: T[]

  private tasks: Array<() => Promise<T>>
  private readonly maxConcurrency: number

  constructor(maxConcurrency: number) {
    this.tasks = []
    this.values = []
    this.maxConcurrency = maxConcurrency
    this.activeCount = 0
  }

  // 将一个任务添加到队列并立即执行
  public pushTask(fn: () => Promise<T>): void {
    if (this.activeCount >= this.maxConcurrency) {
      this.tasks.push(fn)
    } else {
      this.runTask(fn)
    }
  }
  
  public clearTask(): void {
    this.tasks = []
  }

  public clearValues(): void {
    this.values = []
  }
  
  // 从队列中取出一个任务并执行
  private runTask(fn: () => Promise<T>): void {
    this.activeCount++
    fn().then((value) => {
      this.values.push(value)
      this.activeCount--
      if (this.tasks.length > 0) {
        this.runTask(this.tasks.shift()!)
      }
    })
  }
}

这个类的组成成分其实还蛮清晰的: activeCount: 当前正在活动的任务数 values: 这里我是因为学生的二维码需要以Blob数据作为任务结果,所以需要这么个东西

private tasks: 就是当前正在等待的任务队列 private readonly maxConcurrency: 最大的同时执行任务数量,这里因为觉得一个实例就单一处理一个并发量,就不让它能更改了,所以是只读

方法成员就不跟大家介绍了,方法名简单易懂

这里其实还能做更多扩展,比如设置暂停和重启、修改并发量、只是将任务添加进队列但不立即启动等等......

因为像这些扩展都并不难,且现有功能已满足了我的需求,所以就先这样,等以后有需要再修改便可。

相关推荐
木木黄木木3 分钟前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning2134 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu2 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c2 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪2 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆2 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻2 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html