队列 - tom 吃完苹果等待 3 秒玩游戏问题

题目要求：

```javascript

// 执行 tom().eat(‘apple’).sleep(3000).play(‘game’)

输出 eat apple

// 过3s 再输出 play game

<a name="Exruz"></a>
## 分析：
有先后顺序，先调的函数先执行，即先进先出，故这是一个明显的队列问题，因此首先需要一个队列，其次将调用的函数依次放入队列中，队列出队并执行，因为存在异步问题，即延迟 3s 问题，故必须等到出队的元素执行完毕方可以执行下一次出队
<a name="AzZZo"></a>
## 解法 1
1.新建一个队列<br />2.把调用的函数放入队列中，每个函数执行完之后触发下一个 next <br />3.利用宏任务 setTimeout 在所有同步代码执行代码执行完再执行的原理将触发出队的操作放在这里<br />4.依次执行出队操作
<a name="LuMGi"></a>
## ```javascript
function tom() {
  const q = [];
  const next = function () {
    const fn = q.shift();
    fn && fn();
  };
  setTimeout(() => {
    next();
  });
  return {
    eat: function (params) {
      const eat_fn = () => {
        console.log(`eat ${params}`);
        next();
      };
      q.push(eat_fn);
      return this;
    },
    sleep: function (delay) {
      let sleep_fn = () => {
        setTimeout(() => {
          next();
        }, delay);
      };
      q.push(sleep_fn);
      return this;
    },
    play: function (params) {
      const play_fn = () => {
        console.log(`play ${params}`);
        next();
      };
      q.push(play_fn);
      return this;
    },
  };
}
tom().eat('apple').sleep(3000).play('game');

解法 2

1.新建一个队列
2.把调用的函数放入队列中，其中延迟函数封装成一个 Promise
3.利用微任务在所有同步代码执行代码执行完再执行的原理将触发出队的操作放在这里
4.依次执行出队操作，每一次出队必须等待上一个 Promise 执行完毕

```javascript

function tom() { const q = [];

// setTimeout(async () => { // while(q.length > 0) { // const fn = q.shift();

// if (typeof fn === ‘function’) { // await fn() // } // } // })

Promise.resolve().then(async () => { while (q.length > 0) { const fn = q.shift();

  if (typeof fn === 'function') {
    await fn();
  }
}

});

return { eat: function (params) { const eat_fn = () => { return console.log(eat ${params}); };

  q.push(eat_fn);

  return this;
},

sleep: function (delay) {
  let sleep_fn = async () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, delay);
    });
  };

  q.push(sleep_fn);

  return this;
},

play: function (params) {
  const play_fn = () => {
    return console.log(`play ${params}`);
  };

  q.push(play_fn);

  return this;
},

}; }

tom() .eat(‘apple’) .sleep(3000) .play(‘game’) .sleep(3000) .eat(‘apple’) .sleep(3000) .play(‘game’);

解法 3


与 1、2 的区别在于利用拦截器统一做入队操作，写法上更简洁
<a name="8JyMg"></a>
## ```javascript
function tom() {
  const q = [];

  Promise.resolve().then(async () => {
    while(q.length) {
      const fn = q.shift();

      await fn();
    }
  });

  const events = {
    eat(params) {
      console.log(`eat ${params}`);
    },

    sleep(delay) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, delay);
      });
    },

    play(params) {
      console.log(`play ${params}`);
    },
  }

  return new Proxy(events, {
    get(target, p, receiver) {
      const fn = target[p];

      return function() {
        q.push(() => fn(...arguments));

        return receiver;
      };
    },
  });
}

tom()
  .eat('apple')
  .sleep(3000)
  .play('game')
  .sleep(3000)
  .eat('apple')
  .sleep(3000)
  .play('game')
  .sleep(3000)
  .play('game')
  .sleep(3000)
  .eat('apple')
  .sleep(3000)
  .play('game');