题目要求如下:
LazyMan('Tony');
// Hi I am Tony
LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch
LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food
看到sleep,后面接着其他操作是不是第一反应使用promise,没错刚开始我也是这么想的;但是题目涉及的都是链式调用(像jquery那样,$(‘app’).addClass(‘main’).remove() 。。。),应该要返回当前实例,所以使用promise不符合题目要求。
题目分析:
- 题目需要满足链式调用
- sleepFirst执行优先级最高
- 执行是串行的,执行完A,才能执行完B
一种写法
class LazyMan{
constructor(name){
console.log(`Hi I am ${name}`)
this.taskList = []
setTimeout(this.next.bind(this), 0)
}
next(){
const fn = this.taskList.shift()
fn && fn()
}
sleep(time){
const fn = ()=>{
setTimeout(()=>{
console.log(`等待了${time}秒`)
this.next()
}, time * 1000)
}
this.taskList.push(fn)
return this
}
sleepFirst(time){
const fn = ()=>{
setTimeout(()=>{
console.log(`等待了${time}秒`)
this.next()
}, time * 1000)
}
this.taskList.unshift(fn)
return this
}
eat(some){
const fn = ()=>{
console.log(`I am eating ${some}`)
this.next()
}
this.taskList.push(fn)
return this
}
}
写法分析
- 使用数组来实现堆栈
- 每次执行完函数,再显示的调用下一个函数,这保证了只有执行完A,才能执行完B;
Q&A
1.使用轮询的方式来执行数组堆栈是否可行?
可行,但是要保证上一个函数执行完毕。
思路:使用一个全局变量来代表当前函数是否执行完毕