实现一个 LazyMan

[francecil]

实现一个LazyMan，可以按照以下方式调用:

LazyMan("Hank")输出:
Hi! This is Hank!
 
LazyMan("Hank").sleep(10).eat("dinner")输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~
 
LazyMan("Hank").eat("dinner").eat("supper")输出
Hi This is Hank!
Eat dinner~
Eat supper~
 
LazyMan("Hank").sleepFirst(5).eat("supper")输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

以此类推。

• Callbacks
• Promise

[francecil]

Promise + Async

链式调用时，将任务包装成一个 promise 对象并放入队列，并返回 this
链式调用结束时，开始执行 promsie 队列，利用 async/await 去控制。
这个执行是通过实例化时 setTimeout 实现的

代码如下

class _LazyMan {
  constructor(name) {
    let task = function () {
      return new Promise((r) => {
        console.log(`Hi! This is ${name}!`)
        r()
      })
    }
    this.callbacks = [task]
    setTimeout(()=>this.flushCallback(), 0);

  }
  async flushCallback () {
    for (let i = 0; i < this.callbacks.length; i++) {
      await this.callbacks[i].call(this)
    }
  }
  sleep (delay) {
    let task = function () {
      return new Promise((r) => {
        setTimeout(() => {
          console.log(`Wake up after ${delay}`)
          r()
        }, delay * 1000);
      })
    }

    this.callbacks.push(task)
    return this
  }
  eat (sth) {
    this.callbacks.push(() => {
      return new Promise((r) => {
        console.log(`Eat ${sth}`)
        r()
      })
    })
    return this
  }
  sleepFirst (delay) {
    let task = function () {
      return new Promise((r) => {
        setTimeout(() => {
          console.log(`Wake up after ${delay}`)
          r()
        }, delay * 1000);
      })
    }
    this.callbacks.unshift(task)
    return this
  }
}
function LazyMan(name){
  return new _LazyMan(name)
}

[francecil]

纯 Callback

队列中存放所有任务，执行机制为：取出队头任务，执行完任务调用 next 继续取队头直到队列为空

class _LazyMan {
  constructor(name) {
    this.queue = [() => {
      console.log(`Hi! This is ${name}!`)
      this.next()
    }]
    setTimeout(() => this.next(), 0);
  }
  next () {
    let task = this.queue.shift()
    if (task) {
      task.call(this)
    }
  }
  sleep (delay) {
    this.queue.push(() => {
      setTimeout(() => {
        console.log(`Wake up after ${delay}`)
        this.next()
      }, delay * 1000);
    })
    return this
  }
  eat (sth) {
    this.queue.push(() => {
      console.log(`Eat ${sth}`)
      this.next()
    })
    return this
  }
  sleepFirst (delay) {
    this.queue.unshift(() => {
      setTimeout(() => {
        console.log(`Wake up after ${delay}`)
        this.next()
      }, delay * 1000);
    })
    return this
  }
}
function LazyMan (name) {
  return new _LazyMan(name)
}

[francecil]

拓展阅读

1. LazyMan 有几样写法，你知道么？