JS如何控制任务的执行顺序

2021-02-18 20:47:32

484字 2分钟

唠唠嗑

放假在家当咸鱼有一段时间了，也好久没写笔记了，今天逛技术社区的时候遇到了一个有点意思的题目，正好也是我没遇到过的场景，于是记录一下

整活

需求是这样的：

实现一个 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~

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