实现一个带并发限制的promise异步调度器

之前看到这个题目，实现一个带并发限制的promise异步调度器，觉得挺有意思，在这里记录一下。

题目是什么意思呢，就是我们正常情况下，promise是没有并发数量限制的，同一个时间可以多个请求同时执行，然后谁返回的速度快，在前端页面直观的就可以打印谁的返回内容。

class Scheduler {
  constructor() {}
  add(promise) {
    this.runTask(promise);
  }
  runTask(promise) {
    promise().then(res => {
      console.log(res);
    });
  }
}

const scheduler = new Scheduler();
const timeout = (time, order) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(order);
    }, time);
  });
};
const addTask = (time, order) => {
  scheduler.add(() => timeout(time, order));
};
addTask(4000, 1);
addTask(1000, 2);
addTask(900, 3);
addTask(3000, 4);

 

 ok，那我们现在来限制并发数量，假定并发数量最大是2。什么意思呢，就是我们上面例子中，执行任务的盒子，第一个addTask可以放进去，第二个也可以放进去，但第三个不可以立马放进去，因为最大并发数量是2，需要过1000ms，等第二个addTask执行完毕后，那此刻执行任务盒子里只有1个盒子，可以把第三个放进。。。。

那我们来改改 Scheduler。

class Scheduler {
  constructor() {
    this.max = 2;// 最大限制数
    this.work = [];// 正在执行的任务盒子
    this.unwork = [];// 等待的任务盒子
  }
  add(promise) {
    if (this.work.length < this.max) {
      //还没达到最大数量限制，可以直接执行 
      this.runTask(promise);
    } else {
     // 此时任务盒子数量达到并发最大数量，那就放在等待区域
      this.unwork.push(promise);
    }
  }
  runTask(promise) {
    this.work.push(promise);
    promise()
      .then(res => {
        console.log(res);
      })
      .finally(() => {
　　　　　　 // 任务执行完毕，就立马从执行任务盒子删掉
        let index = this.work.indexOf(promise);
        this.work.splice(index, 1);
          // 如果任务等待盒子还有任务，那就继续执行
        if (this.unwork.length) {
          this.runTask(this.unwork.shift());
        }
      });
  }
}

const scheduler = new Scheduler();
const timeout = (time, order) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(order);
    }, time);
  });
};
const addTask = (time, order) => {
  scheduler.add(() => timeout(time, order));
};
addTask(4000, 1);
addTask(1000, 2);
addTask(900, 3);
addTask(3000, 4);
        

 

 

 我们在打印的内容加个时间，看看每个任务都是过了多久才执行打印出来的。

 1 let date = null;
class Scheduler {
  constructor() {
    this.max = 2;
    this.work = [];
    this.unwork = [];
  }
  add(promise) {
    if (this.work.length < this.max) {
      this.runTask(promise);
    } else {
      this.unwork.push(promise);
    }
  }
  runTask(promise) {
16     if (!date) {
17       date = performance.now();
18     }
    this.work.push(promise);
    promise()
      .then(res => {
22         let now = performance.now();
23         let subdate = now - date;
24         /* 处理一下这个时间间隔，因为会多有几十毫秒，处理其他逻辑，如addTask等 */
25         subdate = (subdate / 100).toFixed(0) * 100;
26         console.log('经过多久打印：', subdate, '打印值为：', res);
      })
      .finally(() => {
        let index = this.work.indexOf(promise);
        this.work.splice(index, 1);
        if (this.unwork.length) {
          this.runTask(this.unwork.shift());
        }
      });
  }
}

const scheduler = new Scheduler();
const timeout = (time, order) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(order);
    }, time);
  });
};
const addTask = (time, order) => {
  scheduler.add(() => timeout(time, order));
};
addTask(4000, 1);
addTask(1000, 2);
addTask(900, 3);
addTask(3000, 4);