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