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

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

news 来源：原创 2025/6/12 19:46:06

在鸿蒙 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%')}
}

代码分析：