每日一题：实现一个类，其实例可以链式调用，他有一个sleep方法，可以sleep一段时间后再后续调用

每日一题：

实现一个类，其实例可以链式调用，他有一个sleep方法，可以sleep一段时间后再后续调用

const boy = new PlayBoy('Tom') boy.sayHi().sleep(1000).play('王者').sleep(2000).play('跳一跳') 
// 输出 
// 大家好我是Tom 
// 1s 之后 
// 我在玩王者 
// 2s 之后
// 我在玩跳一跳

方案一：思路(阻塞式解决方案)

• 根据时间进行判断执行
• 主要是while循环强制主线程执行此环节，while是同步代码。所以后续代码的执行会出现阻塞现象。

class PlayBoy {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`大家好我是${this.name}`);
    return this;
  }
  play(game) {
    console.log(`我在玩${game}`);
    return this;
  }
  sleep(time) {
    const start = new Date().getTime();
    while (new Date().getTime() < start + time) {

    }
    console.log(`${time/1000}s 之后`);
    return this 
  }
}
const boy = new PlayBoy("Tom");
boy.sayHi().sleep(1000).play("王者").sleep(2000).play("跳一跳");

---

方案二：思路(异步调用解决方案)

• 主线程不阻塞
• 虽然无法按照题目规定完成算法要求，但是也是一种无阻塞的办法实现，可以无缝
• 主要是将sleep函数包裹成一个Promise
• 此方案主要三实现思路过渡

class PlayBoy{
  constructor(name){
    this.name = name;
  }
  sayHi = ()=>{
    console.log(this.name);
    return this
  }
  sleep = (tiemTag)=>{
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(this)
      },tiemTag*1000)
    })
  }
  play(doing){
    console.log(doing);
    return this;
  }
}
const boy = new PlayBoy("Tom");

boy.sayHi().sleep(2).then(async (that)=>{
  let body = that.play("打篮球");
  let result = await that.sleep(3);
  body = result.play("游泳");
  result = await that.sleep(2);
  body = result.play("回家");
});
console.log("主线程不阻塞");

---

思路三：(异步调用队列解决方案)

在看懂思路二的基础上，在想一种办法，即异步队列，思路二作为异步概念的强调，继承于思路二，如果将异步方法放入一个队列当中，按队列顺序进行执行。即可以实现不阻塞主线程的情况下顺序执行异步队列的方法！
demo1：(经验证此方法无法实现异步队列的顺序执行)

let queue = [new Promise((resolve)=>{
  setTimeout(()=>{
    console.log("a");
    resolve()
  },4000)
}),new Promise((resolve)=>{
  setTimeout(()=>{
    console.log("b");
    resolve()
  },3000)
})];//异步队列
async function run(){
  for(let i=0;i<queue.length;i++){
  if(typeof queue[i] === 'function'){
    queue[i]();
    }else{
      if(queue[i] instanceof Promise){
      let result = await queue[i];
      console.log(result);
      }
    }
  }
}
run();//遍历异步队列。发现无法实现顺序遍历

demo2：主线程不阻塞的顺序遍历异步队列

const createPromise = (id) => () =>{
  return new Promise(resolve=>
		setTimeout(()=>{
			console.log("promise->"+id+":"+new Date());
			resolve();
		},1000*id)
	)
} 
	
var tasks = [createPromise(1),createPromise(4),createPromise(3)];
console.log(tasks);
var doTask = tasks.reduce((prev,next)=>prev.then(()=>{
    return next()  
}),Promise.resolve());
console.log('主线程不阻塞');

这里比较难以理解的是两个地方，createPromise将返回一个匿名函数，此匿名函数如果执行将会返回一个Promise。从而达到我想要的目的；
数组方法：reduce！！！。一个被我玩坏的函数，这个函数此刻的作用就是作为启动异步队列的实现，我首先将prev只作为Promise，顺序执行过程中，通过。.then函数触发，内部下次启动任然是返回一个next(）执行后的Promise！！！！。从而达到异步队列的顺序执行，

---

• 理解了以上步骤，从而实现了异步方法队列的调用成功，就可以运用到此算法实例中即可。

class PlayBoy {
  constructor(name) {
    this.name = name;
    this.queue = [];
    this.games = [];
  }

  sayHi() {
    this.queue.push(() => {
      console.log(`大家好，我是${this.name}`);
    });
    return this; // 返回实例，以便链式调用
  }

  sleep(time) {
    this.queue.push(this.createPromise(time));
    return this; // 返回实例，以便链式调用
  }

  play(game) {
    this.games.push(game)
    return this; // 返回实例，以便链式调用
  }
  start() {
    this.queue.reduce((prev,next)=>prev.then(()=>{
      return next()  
    }),Promise.resolve());
  }
  createPromise = (time) => () =>{
    return new Promise(resolve=>
      setTimeout(()=>{
        console.log(this.games.shift());
        resolve();
      },1000*time)
    )
  } 
}

const boy = new PlayBoy('Gege');
boy.sayHi().sleep(2).play("唱").sleep(3).play('跳').sleep(1).play('rap').start();

按顺序时间输出：

大家好，
我是Gege
唱
跳
rap