探秘鸿蒙 HarmonyOS NEXT：鸿蒙定时器,简单倒计时的场景应用

在鸿蒙 ArkTS 开发中，定时器是实现动态效果和定时任务的重要工具。基于鸿蒙 API 12 及以上版本，ArkTS 提供了功能丰富的定时器 API，本文将带你全面了解定时器的使用方法。

一、定时器常用 API 介绍

ArkTS 中的定时器主要分为一次性定时器（setTimeout）和周期性定时器（setInterval），它们都位于全局命名空间中，使用非常方便。

1. setTimeout - 一次性定时器

typescript

复制代码

setTimeout(handler: Function, delay: number, ...args: any[]): number

handler：定时器触发时执行的回调函数
delay：延迟时间（毫秒）
args：传递给回调函数的参数
返回值：定时器 ID，用于取消定时器

2. setInterval - 周期性定时器

typescript

复制代码

setInterval(handler: Function, delay: number, ...args: any[]): number

参数和返回值与 setTimeout 相同，区别在于 setInterval 会按指定间隔重复执行回调函数。

3. clearTimeout - 取消一次性定时器

typescript

复制代码

clearTimeout(timeoutId: number): void

timeoutId：setTimeout 返回的定时器 ID

4. clearInterval - 取消周期性定时器

typescript

复制代码

clearInterval(intervalId: number): void

intervalId：setInterval 返回的定时器 ID

二、定时器使用步骤

1. 创建定时器

typescript

复制代码

// 创建一次性定时器，2秒后输出"Hello World"
const timeoutId = setTimeout(() => {
  console.log("Hello World");
}, 2000);

// 创建周期性定时器，每秒输出当前时间
const intervalId = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);

2. 传递参数

typescript

复制代码

setTimeout((name: string, age: number) => {
  console.log(`My name is ${name}, I'm ${age} years old.`);
}, 1500, "Tom", 20);

3. 取消定时器

typescript

复制代码

// 取消一次性定时器
clearTimeout(timeoutId);

// 取消周期性定时器
clearInterval(intervalId);

三、代码实战与分析

下面通过几个实际案例来深入理解定时器的使用。

案例 1：简单倒计时功能

typescript

复制代码

@Entry
@Component
struct CountdownTimer {
  @State count: number = 10;
  private timerId: number = -1;

  aboutToAppear() {
    // 启动倒计时
    this.timerId = setInterval(() => {
      if (this.count > 0) {
        this.count--;
      } else {
        clearInterval(this.timerId);
      }
    }, 1000);
  }

  aboutToDisappear() {
    // 组件销毁前取消定时器，避免内存泄漏
    clearInterval(this.timerId);
  }

  build() {
    Column() {
      Text(`倒计时: ${this.count}秒`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

代码分析：

使用 @State 装饰器实现数据绑定
在 aboutToAppear 生命周期函数中启动定时器
每秒更新一次 count 值，当 count 为 0 时取消定时器
在 aboutToDisappear 生命周期函数中取消定时器，防止组件销毁后定时器仍在运行

案例 2：实现轮播图效果

typescript

复制代码

@Entry
@Component
struct CarouselDemo {
  @State currentIndex: number = 0;
  private images: Array<string> = [
    'https://pic.photos/800/400?random=1',
    'https://pic.photos/800/400?random=2',
    'https://pic.photos/800/400?random=3',
    'https://pic.photos/800/400?random=4'
  ];
  private timerId: number = -1;

  aboutToAppear() {
    // 启动轮播定时器
    this.timerId = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }, 3000);
  }

  aboutToDisappear() {
    // 组件销毁前取消定时器
    clearInterval(this.timerId);
  }

  build() {
    Column() {
      // 轮播图片
      Image(this.images[this.currentIndex])
        .width('100%')
        .height(200)
        .objectFit(ImageFit.Cover)
      
      // 指示点
      Row() {
        ForEach(this.images, (_, index) => {
          Circle()
            .width(index === this.currentIndex ? 12 : 8)
            .height(index === this.currentIndex ? 12 : 8)
            .fill(index === this.currentIndex ? '#FF4500' : '#CCCCCC')
            .margin({ left: 5, right: 5 })
        })
      }
      .margin(10)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
  }
}

代码分析：

使用数组存储轮播图片地址
定时器每 3 秒更新一次 currentIndex，实现图片切换
通过 ForEach 动态生成指示点，当前图片对应的指示点显示为橙色
同样注意在组件销毁前取消定时器

四、注意事项

内存泄漏风险：如果组件销毁前未取消定时器，定时器会继续运行，可能导致内存泄漏。
性能考虑：过多或间隔过短的定时器会影响应用性能，特别是 setInterval，应谨慎使用。

掌握 ArkTS 中的定时器 API，能够帮助你实现各种动态交互效果，如自动刷新、动画过渡、数据轮询等功能。合理使用定时器，并注意避免常见陷阱，将使你的应用更加流畅和稳定。