一个倒计时组件，最容易写成 remaining--：创建一个每秒运行的定时器，数字从 120 递减到零。打开页面盯着它看，大多数时候没有明显问题；按下 Home 键、切换应用、锁屏一段时间再回来，剩余时间却可能仍接近离开前的数字。问题不是 Text 没有刷新，而是定时器触发次数并不等于真实经过的秒数。

这篇把需求放进一个独立的“专注计时”页面。我们只做两分钟倒计时的开始、暂停、继续和重置，不连接服务器、不申请危险权限，也不把计时器伪装成后台持续运行的定时任务。目标是保证页面暂时不可见之后再次出现，数字能根据约定的时刻重新计算，并在组件消失时清除定时器，避免幽灵回调。这个问题与表单提交、网络检测、能耗数据和工单持久化完全不同。

一、为什么 setInterval 不能当时间真相

以固定的一秒 setInterval 去执行 seconds -= 1，实际上是在统计 JavaScript 回调被调度的次数。在忙碌的 UI 线程、系统省电状态以及页面进入后台时，回调可能发生延后、合并或暂停。即使设置为 1000 毫秒，也不等于两次回调一定相隔精确的物理一秒。用户看见的卡顿只是一个结果，真正的设计问题是让渲染节奏承担了计时依据的责任。

更稳妥的基线是记录结束时刻：点击开始时，deadlineMs = Date.now() + 120000；之后每次需要显示时，都重新求 Math.max(0, deadlineMs - Date.now())。这里的 250 毫秒定时器只是一种“请界面重新取样”的机制，不是时间累计器。即使中间漏掉很多次回调，恢复后仍以当前时钟和结束时刻的差值计算。这种安排适合短时间的界面倒计时、休息提示和示例性的计时功能。

但 Date.now() 是墙上时钟，用户手动调整系统时间、时区设置与时间同步校正都可能造成跳变。虽然时区本身不改变 Unix 毫秒值，但系统时钟校正会改变差值。因此这不是付款截止、考试防作弊、设备租赁锁止等高风险业务的权威计时方案。那些场景必须引入可信的服务端时刻、单调时钟能力或业务侧的校验协议，不能仅靠前端屏幕上的数字判断是否有效。

二、以单一状态管理开始、暂停与恢复

页面采用 idle/running/paused/done 四种状态。最重要的两个值是 deadlineMs 与 remainingMs：前者是运行中的逻辑期限，后者是暂停时保留的剩余量，也是屏幕展示的响应式数据。点击暂停需要先重新计算一次剩余时间，再停止刷新；点击继续时不要沿用旧 deadlineMs，而是设置 Date.now() + remainingMs。否则暂停的时间也会被计入倒计时。

下面代码可直接放进 entry/src/main/ets/pages/CountdownPage.ets。页面是一个 @Entry 组件，因此可以使用 onPageShow、onPageHide 页面回调。aboutToDisappear 是组件消失前的清理入口。三者不是同一个概念：页面隐藏后仍可能留在路由栈中，而组件被销毁则可能需要彻底释放资源。

type ClockPhase = 'idle' | 'running' | 'paused' | 'done';
const TOTAL_MS: number = 120000;

@Entry
@Component
struct CountdownPage {
  @State private phase: ClockPhase = 'idle';
  @State private remainingMs: number = TOTAL_MS;
  private deadlineMs: number = 0;
  private timerId: number = -1;
  private visible: boolean = false;

  private stopTicker(): void {
    if (this.timerId !== -1) {
      clearInterval(this.timerId);
      this.timerId = -1;
    }
  }

  private syncClock(): void {
    if (this.phase !== 'running') { return; }
    this.remainingMs = Math.max(0, this.deadlineMs - Date.now());
    if (this.remainingMs === 0) {
      this.phase = 'done';
      this.stopTicker();
    }
  }

  private ensureTicker(): void {
    if (!this.visible || this.phase !== 'running' || this.timerId !== -1) {
      return;
    }
    this.timerId = setInterval(() => { this.syncClock(); }, 250);
  }

  private start(): void {
    this.stopTicker();
    this.remainingMs = TOTAL_MS;
    this.deadlineMs = Date.now() + TOTAL_MS;
    this.phase = 'running';
    this.ensureTicker();
  }

  private pause(): void {
    this.syncClock();
    if (this.phase !== 'running') { return; }
    this.phase = 'paused';
    this.stopTicker();
  }

  private resume(): void {
    if (this.phase !== 'paused') { return; }
    this.deadlineMs = Date.now() + this.remainingMs;
    this.phase = 'running';
    this.ensureTicker();
  }

  private reset(): void {
    this.stopTicker();
    this.phase = 'idle';
    this.remainingMs = TOTAL_MS;
    this.deadlineMs = 0;
  }

  private timeLabel(): string {
    const seconds: number = Math.ceil(this.remainingMs / 1000);
    const minute: string = Math.floor(seconds / 60).toString().padStart(2, '0');
    const second: string = (seconds % 60).toString().padStart(2, '0');
    return `${minute}:${second}`;
  }

  onPageShow(): void {
    this.visible = true;
    this.syncClock();
    this.ensureTicker();
  }

  onPageHide(): void {
    this.visible = false;
    this.stopTicker();
  }

  aboutToDisappear(): void { this.stopTicker(); }

  build() {
    Column({ space: 24 }) {
      Text('专注计时').fontSize(30).fontWeight(FontWeight.Bold)
        .fontColor('#23324F')
      Text('页面恢复后按结束时刻重新计算').fontSize(15)
        .fontColor('#64748B')
      Column({ space: 14 }) {
        Text(this.timeLabel()).fontSize(68).fontWeight(FontWeight.Bold)
          .fontColor('#21649C')
        Text(this.phase === 'running' ? '进行中' :
          this.phase === 'paused' ? '已暂停' :
          this.phase === 'done' ? '已结束' : '准备开始')
          .fontSize(17).fontColor('#475569')
      }.width('100%').padding(30).backgroundColor(Color.White)
        .borderRadius(24)
      Button('开始 2 分钟').onClick(() => { this.start(); })
        .enabled(this.phase === 'idle' || this.phase === 'done')
      Button('暂停').onClick(() => { this.pause(); })
        .enabled(this.phase === 'running')
      Button('继续').onClick(() => { this.resume(); })
        .enabled(this.phase === 'paused')
      Button('重置').onClick(() => { this.reset(); })
    }.width('100%').height('100%').padding(26)
      .backgroundColor('#F3F7FB')
  }
}

这份实现只使用 ArkUI 状态与基础 JavaScript 时间函数，不需要 INTERNET、定位、通知或后台长时任务权限。把刷新间隔设为 250 毫秒，并不是要向用户展示毫秒精度；Math.ceil 将不足一秒的剩余量向上取整，使显示在刚启动时是 02:00，刚过一小段时间才出现 01:59。如果不喜欢这种展示方式，可以换成取整，但必须保持整个产品一致。

开发图中编辑器焦点放在 syncClock()、ensureTicker() 和页面生命周期：左侧是 CountdownPage.ets，右侧预览显示“专注计时”和示意的 01:42。这个数字用于解释开始后约十八秒的 UI 状态，并不是性能实测；代码真正运行时，数值将依设备的当下时间变化。开发者可在 DevEco Studio 的预览环境或真机中自行操作验证各按钮的交互。

三、后台恢复时最容易出现的三个错误

第一种错误是 onPageHide 清除定时器，却在 onPageShow 只重新启动定时器，没有立即计算剩余量。用户回到页面的一瞬间可能仍看到旧数值，直到下一次回调才变化。上面先 syncClock() 再 ensureTicker()，正是为了消除这个不必要的显示窗口。页面可见性不等于业务倒计时暂停：默认规则是“后台仍然按自然时间流逝”，只是停止绘制刷新。

第二种错误是多次进入页面反复创建定时器。比如 aboutToAppear、onPageShow 和“继续”按钮都调用 setInterval，却没有判断旧定时器是否仍在工作，最终一个页面同时存在几条刷新循环。timerId !== -1 的防重入让刷新资源始终最多一份；而 stopTicker() 对清理多次调用是安全的。清理函数没有修改 @State，也符合组件消失阶段应避免额外状态副作用的习惯。

第三种错误是暂停和重置没有区分。暂停应冻结 remainingMs，再按继续按钮恢复；重置则取消原时刻，明确回到 02:00。如果把暂停实现成简单的 clearInterval 却仍保留原截止时间，继续运行时会跳过暂停的时间。反过来，如果需求要求后台自动暂停，就应在 onPageHide 调用真正的 pause() 并记录暂停状态，而不是偷偷依赖系统对定时器的节流。不同产品策略没有绝对对错，但必须在交互层明示。

四、如何验证逻辑，而非只看数字会不会动

建议先将倒计时设为两分钟，检查初始 02:00，点击开始后状态为“进行中”。在显示例如 01:42 时切到后台大约十几秒，再返回前台：预期数字会立即根据 deadlineMs 重新计算，而不是仍从上次停住的显示继续递减。因为人为操作耗时不可控，这里应比较绝对截止时间与当前时间的关系，不应要求每一次人工测试恰好显示固定秒数。

再测试“暂停—后台—返回—继续”：暂停期间剩余时间应保持不变，只有继续时才创建新的截止时刻。测试“重复开始”时，运行中的按钮应被禁用；测试“重置”时，定时器应消失，界面回到准备开始；测试计时完毕时，状态进入 done，且不会继续负数滚动。最后，尝试在页面运行中导航到另一个页面并返回，观察刷新是否只存在一条逻辑路径。

可以通过两条时间线进行静态核查。正常运行时，初始期限是“当前时间＋120000 毫秒”，后续剩余量是“期限－当前时间”；暂停时，则保存当下剩余量，继续后产生新的期限。由于 onPageHide 只停止 UI 定时器并不修改 phase，重新展示时仍然会从旧期限计算，这是本文有意选择的“后台照常计时”。同时必须记住：如果应用进程被系统终止，所有内存中的字段都可能丢失，当前代码不会恢复上次任务。需要跨冷启动恢复时，应另行设计持久化的任务状态，并在重建页面时验证时间来源与数据有效性。

这个独立页面解决的是前端“可见性—计时基准—刷新资源”三个职责的分离。定时器负责让画面有机会更新，结束时刻决定真实剩余值，生命周期负责释放资源。它适合专注练习、烹饪提示与低风险 UI 倒计时；涉及合同、交易、考试、支付或者后台准点提醒时，仍需业务后端或系统级定时机制作为权威依据。

官方资料：页面及自定义组件生命周期、ArkUI 状态管理概览、组件生命周期指导。