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,栗子:

1
2
3
4
5
6
7
8
class EatMan {
eat(food) {
console.log(`eat ${food} ~`);
return this;
}
}

new EatMan().eat('apple').eat('pear')

这样就实现链式调用了,下面上主菜 - 控制任务的执行顺序

这里参考某些中间件的实现思路,首先创建一个任务队列,把每个函数放进去,按顺序执行,每个函数执行完成后调用一个 next 函数,执行下一个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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~

学废了扣1,没学废扣眼珠子~