js实现lazyman

实现 LazyMan

LazyMan 是一个经典的 JavaScript 面试题，要求实现一个链式调用的延迟执行队列。以下是一种实现方式：

class LazyMan {
  constructor(name) {
    this.name = name;
    this.tasks = [];
    console.log(`Hi I am ${this.name}`);
    setTimeout(() => {
      this.next();
    }, 0);
  }

  next() {
    const task = this.tasks.shift();
    task && task();
  }

  sleep(time) {
    const fn = () => {
      setTimeout(() => {
        console.log(`Wake up after ${time} seconds`);
        this.next();
      }, time * 1000);
    };
    this.tasks.push(fn);
    return this;
  }

  sleepFirst(time) {
    const fn = () => {
      setTimeout(() => {
        console.log(`Wake up after ${time} seconds`);
        this.next();
      }, time * 1000);
    };
    this.tasks.unshift(fn);
    return this;
  }

  eat(food) {
    const fn = () => {
      console.log(`I am eating ${food}`);
      this.next();
    };
    this.tasks.push(fn);
    return this;
  }
}

function lazyMan(name) {
  return new LazyMan(name);
}

使用示例

lazyMan('Tom').eat('lunch').sleep(2).eat('dinner').sleepFirst(3);

// 输出顺序:
// Hi I am Tom
// (等待3秒)
// Wake up after 3 seconds
// I am eating lunch
// (等待2秒)
// Wake up after 2 seconds
// I am eating dinner

实现原理

1. 使用任务队列存储所有待执行的方法
2. 通过 setTimeout 实现异步调用，确保链式调用完成后才开始执行
3. sleepFirst 通过 unshift 方法将任务插入队列头部
4. 每个任务完成后调用 next 方法触发下一个任务

注意事项

1. 构造函数中使用 setTimeout 确保链式调用完成后再开始执行任务
2. 每个方法返回 this 以实现链式调用
3. 任务执行完成后必须调用 next 方法继续执行后续任务

这种实现方式利用了 JavaScript 的事件循环机制和队列数据结构，可以灵活地处理各种延迟执行的场景。