JavaScript 任务队列实现

最近公司项目使用到队列，并在队列每一项中进行业务逻辑处理，大家可以看如下图片方便理解

 处理的思路

1.将list请求列表的数组加入到消息队列（任务队列），开始处理任务队列（当任务数量大于0）

2.等待一个任务完成（删除完成的任务）在处理下一个任务，直到处理完成，改变任务状态false

data(){
	return {
		//队列
		queue: [],
		//接口返回的数据（模拟）
		jieKouArr: [1, 2, 3, 4, 5, 7],
		//是否在处理状态
		isFlag: false
	}
 }

methods: {
	add() {
		//模拟点击一次相当于接口返回一次数据
		this.jieKouArr.forEach(val => {
			 this.queue.push(val)
		})
		// 队列不为空且队列处理闲置状态
		if (this.jieKouArr.length > 0 && !this.isFlag) {
			this.isFlag = true
			this.processQueue()
		}
		//add方法只是实现的例子，具体还要看具体业务，来它进行实现
	},
	request(item) {
			//这里模拟数据请求或者数据处理
			setTimeout(() => {
				console.log(item += 1);
				// 处理完成后接着调用队列
				this.processQueue()
			}, 200)
	},
	processQueue() {
		 // 去队列中第一个数据进行处理
		 let item = this.queue.shift()
		 // 判断是否为undefined，不为undefined的话说明在队列中取到数据
		 // 进行数据处理
		 if (item != undefined) {
			 this.request(item)
		 } else {
			 //队列处理完成，改变闲置状态
			 this.isFlag = false
		 }
	}
}