zm-counting v1.0.1

这段 TypeScript 代码定义了一个名为 Counting 的类，用于实现一个计时器功能。该计时器可以开始、暂停、恢复、结束和重置。下面是对代码的详细解释：

枚举 CountingState

enum CountingState {
  Pennding,
  Running,
  Paused,
  Finished,
}

定义了计时器的四种状态：Pending（待定）、Running（运行中）、Paused（暂停）和 Finished（完成）。

接口 CountingOptions

export interface CountingOptions {
  tick?: () => void;
}

定义了一个可选的接口 CountingOptions，其中包含一个可选的 tick 方法，用于在计时器每次更新时调用。

类 Counting

export default class Counting {
  // 类的属性
  public passTime: number; // 过去时间
  private countingPoint: number; // 计时点
  private _state: CountingState;
  private timer: number | null = null;
  private tick: () => void;

  // 构造函数
  constructor({ tick = () => {} }: CountingOptions) {
    this.passTime = 0;
    this.countingPoint = 0;
    this._state = CountingState.Pennding;
    this.timer = null;
    this.tick = tick;
  }

  // 获取器
  get state() {
    return this._state;
  }

  get time() {
    const milliseconds = Math.abs(this.passTime);
    const seconds = Math.floor(milliseconds / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    return {
      days,
      hours: hours % 24,
      minutes: minutes % 60,
      seconds: seconds % 60,
      milliseconds: milliseconds % 1000,
    };
  }

  // 私有方法
  private counting() {
    const now = Date.now();
    this.passTime += now - this.countingPoint;
    this.countingPoint = now;
    if (this.tick) this.tick();
    this.timer = requestAnimationFrame(() => this.counting());
  }

  private stopCounting() {
    if (this.timer) cancelAnimationFrame(this.timer);
  }

  // 公共方法
  public async start() {
    this.stopCounting();
    this._state = CountingState.Running;
    this.passTime = 0;
    this.countingPoint = Date.now();
    this.counting();
  }

  public async pause() {
    if (this._state === CountingState.Running) {
      this._state = CountingState.Paused;
      this.passTime += Date.now() - this.countingPoint;
      this.stopCounting();
    }
  }

  public async resume() {
    if (this._state === CountingState.Paused) {
      this._state = CountingState.Running;
      this.countingPoint = Date.now();
      this.counting();
    }
  }

  public async end() {
    this._state = CountingState.Finished;
    this.passTime = 0;
    this.stopCounting();
  }

  public async reset() {
    this._state = CountingState.Pennding;
    this.passTime = 0;
    this.stopCounting();
  }
}

属性

• passTime: 记录计时器已经过去的时间。
• countingPoint: 记录上一次计时的时间点。
• _state: 计时器的当前状态。
• timer: 用于存储计时器的定时器 ID。
• tick: 一个回调函数，每次计时器更新时调用。

构造函数

• 接受一个 CountingOptions 对象，其中包含一个可选的 tick 回调函数。

获取器

• state: 返回计时器的当前状态。
• time: 返回计时器的时间，以天、小时、分钟、秒和毫秒的形式。

私有方法

• counting(): 计时器的主要逻辑，更新 passTime 并调用 tick 回调函数。
• stopCounting(): 停止计时器。

公共方法

• start(): 开始计时器。
• pause(): 暂停计时器。
• resume(): 恢复计时器。
• end(): 结束计时器。
• reset(): 重置计时器。

注意事项

• tick 回调函数在每次计时器更新时被调用，可以用于更新 UI 或执行其他逻辑。
• 计时器使用 requestAnimationFrame 来实现平滑的计时，确保在浏览器刷新时更新计时器。
• 计时器状态的管理确保了在暂停和恢复时正确处理时间。

这段代码实现了一个功能齐全的计时器，可以用于各种需要计时的场景，如倒计时、游戏计时等。