zm-counting
v1.0.1
Published
A simple counting library for JavaScript
Downloads
112
Readme
这段 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
来实现平滑的计时,确保在浏览器刷新时更新计时器。 - 计时器状态的管理确保了在暂停和恢复时正确处理时间。
这段代码实现了一个功能齐全的计时器,可以用于各种需要计时的场景,如倒计时、游戏计时等。