当前位置：首页 > article >正文

HarmonyOS】ArkTS学习之基于TextTimer的简易计时器的elapsedTime最小时间单位问题

article 2024/9/23 0:29:10

本文旨在纪录自己对TextTimer使用过程的疑惑问题
我在查看教程时候，发现很多博客在onTimer(event: (utc: number, elapsedTime: number) => void) 这里提到elapsedTime：计时器经过的时间，单位为毫秒。我不清楚是否为版本问题。
在我查看version11和version10的api时候，说的都是设置格式的最小单位。
在这里插入图片描述
经过个人检验的情况是：version11和version10都是依据格式（format）的最小单位设置的。
例如：

@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  build() {
    Column() {
      TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
        })
      Row() {
        Button("start").onClick(() => {
          this.textTimerController.start()
        })
        Button("pause").onClick(() => {
          this.textTimerController.pause()
        })
        Button("reset").onClick(() => {
          this.textTimerController.reset()
        })
      }
    }
  }
}

在这里插入图片描述
这里显然·应该是5300毫秒，但是显示530，如果考虑到format中最小为SS，也就是10ms，那么就说得通了
同理：

import router from '@ohos.router'

@Entry
@Component
struct TextTimerPage {
  @State message: string = '通过文本显示计时信息并控制其计时器状态的组件。'
  @State onTimerContent: string = ''
  // TextTimer的控制器
  private controller: TextTimerController = new TextTimerController()

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width('96%')
          Blank(12)
          TextTimer({ isCountDown: true, count: 120000, controller: this.controller })
            .fontSize(20)
            .fontColor(Color.Red)
            .format('mm:ss')
            .onTimer((utc: number, elapsedTime: number) => { // utc 时间戳， elapsedTime计时器经过的时间
              this.onTimerContent = 'textTimer 时间戳 utc is：' + utc + ', 计时器经过的时间 elapsedTime: ' + elapsedTime;
            })
          Blank(12)
          Row() {
            Button('计时器启动').width('30%').onClick(() => {
              this.controller.start();
            })
            Button('计时器暂停').width('30%').margin({ left: '2.5%', right: '2.5%' }).onClick(() => {
              this.controller.pause();
            })
            Button('计时器重置').width('30%').onClick(() => {
              this.controller.reset();
            })
          }
          .alignItems(VerticalAlign.Center)

          Blank(12)
          Text(this.onTimerContent).width('96%').fontSize(20).fontColor(Color.Red)
          Blank(12)
          Button("文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/textTimer/TextTimerDesc",
              })
            })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

在这里插入图片描述

这里应该是5s，也就是5000ms，如果考虑format中的最小单位为s，也说得通

再次考虑这个情况：

// xxx.ets
@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()

  build() {
    Column() {
      TextTimer({controller: this.textTimerController})
        .format('mm:ss:SSS')
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
        })
      Row() {
        Button("start").onClick(() => {
          this.textTimerController.start();
        });
        Button("pause").onClick(() => {
          this.textTimerController.pause();
        });
        Button("reset").onClick(() => {
          this.textTimerController.reset();
        });
      }
    }
  }
}