震惊！编程菜鸟居然写出这样的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

这样做的确完成了题目所要求的功能，但缺点也是显而易见的：

1. 异步事件时间未知的情况下，完全不可行。而通常我们需要实现的异步操作(如ajax请求)的时间都是未知的，所以这方法相当于没有卵用；
2. 因为是伪异步执行，如果题目出现这样的情况：

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

-----------------------------------\\完美//----------------------------------

1. 首次链式调用时，分别将方法push进队列中。

eat(food) {
    var fn = () => {
      console.log('eat ' + food)
      this.next()
    }
    this.queue.push(fn)
    return this
  }

2. 异步方法在完成时，通过调用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()方法，就可以轻松实现异步回调啦！跪倒～

总结：对比自己的实现简直好太多啦，再次提醒自己，在不停转换角度思考问题的同时不要轻易放弃正确的实现思路。