震惊！编程菜鸟居然写出这样的LazyMen！震惊！编程菜鸟居然写出这样

逛着博客看到一道很有意思的面试题，手痒痒就自己做了一下。看了标准答案之后发现自己真是‘思路精奇’，明明有更优雅更简单的实现方式，硬是用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 }

【震惊！编程菜鸟居然写出这样的LazyMen！】这样只要运用一个通用的队列和next()方法，就可以轻松实现异步回调啦！跪倒～
总结：对比自己的实现简直好太多啦，再次提醒自己，在不停转换角度思考问题的同时不要轻易放弃正确的实现思路。