课程名称:2周刷完100道前端优质面试真题
课程章节:第8章 前端面试技能拼图6: 编写高质量代码 - 正确,完整,清晰,鲁棒
主讲老师:双越
课程内容:
今天学习的内容包括:
8-11 手写一个LazyMan,实现sleep机制(13:10)
主要是讲 LazyMan 是啥,以及实现要注意的地方。
课程收获:
-
LazyMan
作用:等待一定时间后才执行。要支持sleep、eat 两方法; 支持链式调用。
思路
eat、sleep 链式调用,用类实现,并且方法返回当前 this。
由于 sleep 函数是延迟执行不能直接调用。故 eat、sleep 函数调用时先依次入队。next 即为出队并执行的操作。eat 立刻调用 next,sleep 要 setTimeout 间隔一定事件后才出队执行。
所有方法注册完成后,触发执行。在constructor里 setTimeout(() => {this.next();});
class LazyMan {
constructor(name) {
//
this.tasks = [];
this.name = name;
setTimeout(() => {
this.next();
});
}
next() {
const task = this.tasks.shift(); // 取出当前 tasks 的第一个任务
if (task) task();
}
eat(food) {
const task = () => {
console.info(`${this.name} eat ${food}`);
this.next();
};
this.tasks.push(task);
return this;
}
sleep(seconds) {
const task = () => {
console.info(`${this.name} 开始睡觉`);
setTimeout(() => {
console.info(
`${this.name} 已经睡完了 ${seconds}s,开始执行下一个任务`
);
this.next(); // xx 秒之后再执行下一个任务
}, seconds * 1000);
};
this.tasks.push(task);
return this; // 链式调用
}
}