下面是一个精彩的前端题目,主要考察的是对Promise的理解和运用:
实现一个带并发限制的异步调度器
Scheduler,保证同时运行的任务最多有两个。完善下面代码中的Scheduler类,使得以下程序能正确输出。
js
class Scheduler {
add(promiseCreator) { ... }
// ...
}
const timeout = (time) => new Promise(resolve => {
setTimeout(resolve, time)
})
const scheduler = new Scheduler()
const addTask = (time, order) => {
scheduler.add(() => timeout(time)).then(() => console.log(order))
}
addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')
// 打印顺序是:2 3 1 4先自己想一分钟。
这道题的关键是对Promise的理解,Promise的resolve和reject可以看作是回调函数的另一种写法,我们可以把resolve和reject当作promise的属性存起来,当promise执行完后再调用它上面的属性——resolve/reject,这样就实现了promise定义和调用的分离。
题目中scheduler.add(() => timeout(time))之后接的是then,说明add方法一定是一个Promise。add方法可以被立即调用,但是不一定会立即执行,说明维护了一个队列,存放我们的任务。
另外,同时运行的任务最多有两个,说明要维护一个变量存放正在运行的任务数量。
下面是一个解法:
js
class Scheduler {
constructor() {
this.promises = [];
this.doingJobs = 0;
}
add(promiseCreater) {
return new Promise((resolve, reject) => {
// 关键是给传过来的函数加个回调属性,当resolved的时候,就能返回对应的结果了。
promiseCreater.resolve = resolve;
promiseCreater.reject = reject;
this.promises.push(promiseCreater);
this.run();
});
}
run() {
if (this.doingJobs < 2 && this.promises.length) {
this.doingJobs += 1;
const promise = this.promises.shift();
promise().then((res) => {
promise.resolve(res);
})
.catch((err) => {
promise.reject(err);
})
.finally(() => {
this.doingJobs -= 1;
this.run();
});
}
}
}如果有其他答案或疑问,欢迎交流。