vue 任务队列
taskQueue.js
export default class TaskQueue {
constructor(max = 2) {
// 控制请求最大并发数
this.max = max
// 队列 用shift方法实现先进先出
this.taskList = []
setTimeout(() => {
this.run()
})
}
// 添加任务队列
addTask (task) {
this.taskList.push(task)
}
// 执行任务队列
run () {
const length = this.taskList.length
if (!length) {
return
}
const min = Math.min(length, this.max)
for (let i = 0; i < min; i++) {
// 开始占用一个空间
this.max--
// 获取下一个执行的任务
const task = this.taskList.shift()
task().then(res => {
console.log(res);
}).catch(err => {
console.log(err);
}).finally(() => {
// 释放一个任务空间
this.max++
// 执行
this.run()
})
}
}
}
使用 index.vue
submit() {
const taskQueue = new TaskQueue(3);
for (let i = 0; i < 20; i++) {
const task = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(i);
}, 2000);
})
taskQueue.addTask(task); //当所有任务添加到队列中后自动执行。
}
}
具体参考
【前端学习笔记_JS】设计任务队列，控制请求最大并发数 - 掘金 (juejin.cn)
