一道很有启发的面试题

题目要求如下：

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.使用轮询的方式来执行数组堆栈是否可行？
可行，但是要保证上一个函数执行完毕。
思路：使用一个全局变量来代表当前函数是否执行完毕