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秒定时器