在鸿蒙 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，能够帮助你实现各种动态交互效果，如自动刷新、动画过渡、数据轮询等功能。合理使用定时器，并注意避免常见陷阱，将使你的应用更加流畅和稳定。
