提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档文章目录前言一、TextTimer 组件和setInterval的区别二、使用步骤1.setInterval代码实现2.TextTimer的代码实现总结前言提示在实现倒计时功能的时候我们一般会用setinterval()来实现可能会出现一种时间精度问题所以今天我们使用一种鸿蒙系统自带的TextTimer组件实现使用场景文本计时器组件常用于倒计时、运动计时等场景提示以下是本篇文章正文内容下面案例可供参考一、TextTimer 组件和setInterval的区别对比维度TextTimer 组件setInterval本质鸿蒙内置 UI 组件渲染 计时一体JS 逻辑定时器纯逻辑无界面使用目的单纯展示倒计时时间只做计时 UI 展示自定义复杂业务逻辑倒计时判断、接口轮询、弹窗、蓝牙、数据校验时间精度毫秒级原生渲染计时稳定无累积误差受主线程阻塞影响长时间运行会累积时间偏移变量维护无需自己定义剩余秒数变量组件内部托管时间必须手动定义 State 变量存储剩余时间自己做减法时间格式化内置format一键ss / mm:ss / hh:mm:ss需要自己手写函数拼接时分秒字符串自动停止支持设置总时长时间到自动停止计时必须手动判断数值调用 clearInterval 销毁生命周期销毁页面销毁自动停止无内存泄漏风险页面退出必须手动 clearInterval否则内存泄漏、后台持续执行回调能力仅提供计时时间回调适合单纯展示回调内可写任意复杂逻辑字符串匹配、弹窗、震动、网络请求、分支判断适用场景简单静态倒计时 UI活动倒计时、纯计时展示你的业务车辆倒计时 判断预估8秒有车、匹配字符串、触发提醒、多分支业务逻辑二、使用步骤1.setInterval代码实现private estArriCountdownTimerId:number|nullnull State countdownTime:number10 estimatedArrivalCountdown(){ if(this.estArriCountdownTimerId !null){ this.clearTimer(); } this.estArriCountdownTimerIdsetInterval((){ this.countdownTime--; if(this.countdownTime 0){ this.clearTimer(); } },1000); } // 清除定时器封装 clearTimer() { if (this.estArriCountdownTimerId ! null) { clearInterval(this.estArriCountdownTimerId) this.estArriCountdownTimerId null } }2.TextTimer的代码实现Entry Component export struct VideoPage { private estArriCountdownTimerId:number|nullnull State countdownTime:number10 getMainTitleText(content:string){ const reg /^预估(\d)秒有车$/; const resultreg.exec(content); if(result){ return true } return false; } aboutToDisappear(): void { this.clearTimer(); } private countDownTextTimerControllernew TextTimerController() State private timerModifier: TextTimerModifier new TextTimerModifier(,false); Builder textTimerBuilder(textInfo:string) { // 马上用车 TextTimer({ isCountDown: true, count: 60 * 1000, controller: this.countDownTextTimerController }) .width(100%) .contentModifier(this.timerModifier) .format(ss) .onTimer((utc: number, elapsedTime: number) { console.log(文本定时器是utcelapsedTime) }) .onAppear((){ const result this.getMainTitleText(textInfo); this.timerModifier.textInfotextInfo this.timerModifier.isCountDownresult if(result){ this.countDownTextTimerController.start() } }) } build() { NavDestination(){ Column(){ this.textTimerBuilder(预估60秒有车); }.width(100%).height(100%).backgroundColor(Color.Pink).justifyContent(FlexAlign.Center) } } } class TextTimerModifier implements ContentModifierTextTimerConfiguration{ textInfo:string isCountDown:boolean constructor(textInfo:string,isCountDown:boolean) { this.textInfotextInfo this.isCountDownisCountDown } applyContent(): WrappedBuilder[TextTimerConfiguration] { return wrapBuilder(buildTextTimer); } } Builder function buildTextTimer(config: TextTimerConfiguration){ Text( (config.contentModifier as TextTimerModifier).isCountDown ? 预估${(Math.max(config.count / 1000 - config.elapsedTime, 0))}秒有车就来了 :${(config.contentModifier as TextTimerModifier).textInfo ?? }) .id(taxi_order_calling_title) .fontWeight(500) .fontSize(18) .lineHeight(24) }总结提示这里对文章进行总结例如以上就是今天要讲的内容本文仅仅简单介绍了TextTimer和setinterval的使用方法和场景大家可以根据使用场景选择不同的倒计时实现方案。
