逛着博客看到一道很有意思的面试题，手痒痒就自己做了一下。看了标准答案之后发现自己真是‘思路精奇’😂，明明有更优雅更简单的实现方式，硬是用ugly的奇葩的方法做出来了。
WechatIMG1.jpeg
题目要求是实现一个LazyMen的函数或类，能用链式调用同步的eat方法和异步的sleep方法。难点在于类方法采用非回调的链式调用，但方法链中接在异步方法之后的函数必须等待异步完成后才能执行。
菜鸟的实现：
（ps. 一开始的想法居然是在异步方法里强行阻塞，简直为自己居然有这样人神共愤天地不容的想法感到羞耻。）
实现是思路是，既然无法回调，就将异步调用的时间利用闭包存起来，将同步方法延迟执行。
const LazyMan = (function() {
let sleepFirst = 0,
sleep = 0;
const obj = {
sleep(time) {
sleep += time;
let curSleep = sleep;
setTimeout(() => {
setTimeout(() => {
sleep -= time;
console.log('Wake up after ' + time);
}, curSleep*1000)
})
return this;
},
eat(food) {
setTimeout(() => {
setTimeout(() => {
console.log('Eat ' + food + '~');
}, sleep*1000 + sleepFirst*1000)
}, 0)
return this;
},
sleepFirst(time) {
sleepFirst = time;
return this;
}
}
return function(name) {
setTimeout(() => {
if (sleepFirst) {
setTimeout(() => {
console.log('Wake up after ' + sleepFirst);
console.log('Hi! this is ' + name + '!');
sleepFirst = 0;
}, sleepFirst*1000)
} else {
console.log('Hi! this is ' + name + '!');
}
}, 0)
return obj;
}
}());
test：
WX20170321-112231.png
这样做的确完成了题目所要求的功能，但缺点也是显而易见的：
- 异步事件时间未知的情况下，完全不可行。而通常我们需要实现的异步操作(如ajax请求)的时间都是未知的，所以这方法相当于没有卵用；
- 因为是伪异步执行，如果题目出现这样的情况：
WX20170321-114725.png
睡了吃了又睡又吃，就会出现错误。因为我们对睡眠时间的处理是累加的，所有的吃的方法都会等待8s后才会被调用。
所以，正确的思路还是应该想办法运用回调达到真正的异步顺序执行。
老司机的正确的姿势：
class LazyMan {
constructor(name) {
this.queue = []
var hi = () => {
console.log(`Hi! This is ${name}!`)
this.next()
}
this.queue.push(hi)
setTimeout(() => {
this.next()
}, 0)
}
next() {
var fn = this.queue.shift()
fn && fn()
}
eat(food) {
var fn = () => {
console.log('eat ' + food)
this.next()
}
this.queue.push(fn)
return this
}
sleep(time) {
var fn = () => {
setTimeout(() => {
console.log('Wake up after '+ time + 's!')
this.next()
}, time*1000)
}
this.queue.push(fn)
return this
}
sleepFirst(time) {
var fn = () => {
setTimeout(() => {
console.log('Wake up after '+ time + 's!')
this.next()
}, time*1000)
}
this.queue.unshift(fn)
return this
}
}
**test: **
WX20170321-115358.png
-----------------------------------\\完美//----------------------------------
- 首次链式调用时，分别将方法push进队列中。
eat(food) {
var fn = () => {
console.log('eat ' + food)
this.next()
}
this.queue.push(fn)
return this
}
- 异步方法在完成时，通过调用this.next()去实现下个方法的调用，就实现了回调。
sleep(time) {
var fn = () => {
setTimeout(() => {
console.log('Wake up after '+ time + 's!')
this.next()
}, time*1000)
}
this.queue.push(fn)
return this
}
这样只要运用一个通用的队列和next()方法，就可以轻松实现异步回调啦！跪倒～
