JS如何控制任务的执行顺序
原创
唠唠嗑
放假在家当咸鱼有一段时间了，也好久没写笔记了，今天逛技术社区的时候遇到了一个有点意思的题目，正好也是我没遇到过的场景，于是记录一下
整活
需求是这样的：
实现一个 EatMan 说明:实现一个 EatMan，EatMan 可以有以下一些行为 示例: 1.EatMan(“Hank”) 输出 Hi This is Hank! 2.EatMan(“Hank”).eat(“dinner”).eat(“ supper”) 输出 Hi This is Hank! Eat dinner~ Eat supper~ 3.EatMan(“Hank”).eat(dinner’).eatFirst(“lunch”) 输出 Eat lunch Hi This is Hank! Eat supper~ 4.EatMan(“Hank”).eat(‘dinner).eatFirst(“lunch”).eatFirst(“breakfast”) 输出 Eat breakfast~ Eat lunch~ Hi This is Hank! Eat supper~
从这里不难看出，这里主要的点是链式调用和流程控制
链式调用很简单，核心的点就是函数执行完后 返回 this，栗子：
class EatMan {
eat(food) {
console.log(`eat ${food} ~`);
return this;
}
}
new EatMan().eat('apple').eat('pear')这样就实现链式调用了，下面上主菜 - 控制任务的执行顺序
这里参考某些中间件的实现思路，首先创建一个任务队列，把每个函数放进去，按顺序执行，每个函数执行完成后调用一个 next 函数，执行下一个函数
class EatMan {
constructor(name) {
this.name = name;
this.tasks = [];
this.init();
// 利用 setTimeout 的机制 在下一个事件循环才开始执行
setTimeout(() => {
this.next();
}, 0);
}
init() {
const _this = this
const fn = function() {
console.log('Hi This is Hank!');
_this.next()
}
this.tasks.push(fn)
}
next() {
const t = this.tasks.shift();
t && t();
}
eat(name) {
const _this = this;
const fn = function () {
console.log(`Eat ${name}~`);
_this.next();
};
this.tasks.push(fn);
return this; // 实现链式调用
}
eatFirst(name) {
const _this = this;
const fn = function () {
console.log(`Eat ${name}~`);
_this.next();
};
this.tasks.unshift(fn);
return this;
}
}
new EatMan("Hank").eat("dinner").eat("supper").eatFirst("lunch").eatFirst("breakfirst");输出：
Eat breakfirst~ Eat lunch~ Hi This is Hank! Eat dinner~ Eat supper~
首发自：JS如何控制任务的执行顺序 - 小鑫の随笔
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
