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

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

news 来源：原创 2024/9/19 15:05:08

本文旨在纪录自己对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();});}}}
}