LazyMan函数实现

题目:

js
12345678910111213141516171819202122232425262728
//1
LazyMan("Cain")
//输出“你好!我是Cain!”

//2
LazyMan("Cain").sleep(10).eat("dinner")
//输出“你好!我是Cain!”
//等待10秒
//输出“我醒了,我睡了10秒”
//输出“我现在吃晚饭”

//3
LazyMan("Cain").sleep(10).eat("dinner").eat("breakfast")
//输出“你好!我是Cain!”
//等待10秒
//输出“我醒了,我睡了10秒”
//输出“我现在吃晚饭”
//我现在吃早饭

//4
LazyMan("Cain").sleep(10).eat("dinner").eat("breakfast").sleepFirst(5)
//等待5秒
//输出“我醒了,我睡了5秒”
//输出“你好!我是Cain!”
//等待10秒
//输出“我醒了,我睡了10秒”
//输出“我现在吃晚饭”
//我现在吃早饭

代码实现:

js
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
import { onMounted } from "vue";

const LazyMan = (name) => {
  var queue = [];
  const task = () => {
    console.log(`你好!我是${name}`);
    next();
  };

  const next = () => {
    if (queue.length > 0) {
      queue.shift()();
    }
  };
  queue.push(task);
  //
  setTimeout(next, 0);

  const api = {
    sleep(time) {
      const task = () => {
        setTimeout(() => {
          console.log(`等待了${time}秒`);
          next();
        }, time * 1000);
      };
      queue.push(task);
      return api;
    },
    eat(food) {
      const task = () => {
        if (food == "dinner") {
          console.log(`我吃了晚饭`);
          next();
        }
        else {
          console.log(`我吃了早饭`);
          next();
        }
      };
      queue.push(task);
      return api;
    },
    sleepFirst(time) {
      const task = () => {
        setTimeout(() => {
          console.log(`等待了${time}秒`);
          next();
        }, time * 1000);
      };
      queue.unshift(task);
      return api;
    },
  };
  return api;
};
onMounted(() => {
  LazyMan("Cain").sleep(10).eat("dinner").eat("breakfast").sleepFirst(5)
});

执行过程:

js
1234567891011121314151617
1. 创建 queue = []
2. 创建 task 函数  
3. queue.push(task) → queue = [task]
4. setTimeout(next, 0) ← 只是注册,不立即执行!
5. 创建并返回 api 对象
6. 调用 sleep(5):
   - queue.push(sleepTask) → queue = [task, sleepTask]

7. 事件循环:现在才执行 setTimeout 回调回调!
   - next() 第一次执行:取出并执行 task()
     ↓
     输出"你好!我是张三"
     调用 next()
     
   - next() 第二次执行:取出并执行 sleepTask()
     ↓
     设置5秒定时器