【JavaScript】简单使用生成器函数和迭代器的任务处理队列

JavaScript中经常会遇到需要按顺序执行的任务队列操作，比如在前端中拼接数据导出excel。

在后端接口不改变的情况下，通过循环请求拼接数据的方式生成excel，并且做出一个真实进度的进度条。

在直接使用for循环的情况下会导致进度条跑满了，由于浏览器并发数量的限制，有一部分接口还在排队请求中。

当然可以通过使用递归Promise方式来实现，这里使用了生成器函数和迭代器来实现这个需求。

js异步任务队列处理

假设有一个需要耗时并且按顺序处理的任务队列，队列中有一摞数字[1,2,3,4,5,6,7,8,9]需要处理。

通过生成函数和迭代器,按顺序一个个执行处理并输出处理结果。并且可以在中间使用setTime来减慢函数执行速度。

使用event.next()来启动迭代

当执行到最后一个时:迭代器返回的结果 done:true。

// 待处理数组列表
const list = [1,2,3,4,5,6,7,8,9]
// 迭代函数
const event = eventList(list)
// 迭代处理炒作
function doIt(item) {
  setTimeout(() => {
    console.log('处理事件',item)
    // 输出迭代
    console.log('event.next()',event.next())
  },Math.random()*1000)
}
// 函数指针
function* eventList(list) {
  for (let i = 0; i < list.length; i++) {
    // 迭代函数
    yield doIt(list[i])
  }
}

处理事件 1
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 1
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 2
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 3
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 4
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 5
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 6
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 7
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 8
VM238:9 event.next() {value: undefined, done: false}
VM238:7 处理事件 9
VM238:9 event.next() {value: undefined, done: true}