提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：在实现倒计时功能的时候，我们一般会用setinterval()来实现，可能会出现一种时间精度问题，所以今天我们使用一种鸿蒙系统自带的TextTimer组件实现：

使用场景：文本计时器组件，常用于倒计时、运动计时等场景

提示：以下是本篇文章正文内容，下面案例可供参考

一、TextTimer 组件和setInterval的区别

二、使用步骤

1.setInterval代码实现

 private estArriCountdownTimerId:number|null=null
 @State countdownTime:number=10
estimatedArrivalCountdown(){
    if(this.estArriCountdownTimerId !==null){
      this.clearTimer();
    }
    this.estArriCountdownTimerId=setInterval(()=>{
      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|null=null
  @State countdownTime:number=10


  getMainTitleText(content:string){
    const reg= /^预估(\d+)秒有车$/;
    const result=reg.exec(content);
    if(result){
      return true
    }
    return false;
  }
  aboutToDisappear(): void {
    this.clearTimer();
  }

  private countDownTextTimerController=new 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('文本定时器是'+utc+'===='+elapsedTime)
      })
      .onAppear(()=>{
        const result= this.getMainTitleText(textInfo);
        this.timerModifier.textInfo=textInfo
        this.timerModifier.isCountDown=result
        if(result){
          this.countDownTextTimerController.start()
        }
      })
  }

  build() {
    NavDestination(){
      Column(){
      
        this.textTimerBuilder('预估60秒有车');
      }.width('100%').height('100%').backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)
    }

  }
}

class TextTimerModifier implements ContentModifier<TextTimerConfiguration>{
  textInfo:string
  isCountDown:boolean
  constructor(textInfo:string,isCountDown:boolean) {
    this.textInfo=textInfo
    this.isCountDown=isCountDown
  }
  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的使用方法和场景，大家可以根据使用场景选择不同的倒计时实现方案。