HarmonyOS 中的 setInterval的基本使用

在HarmonyOS中，setInterval 是用于定时执行某个函数的定时器API，与Web开发中的用法类似，但需要注意在ArkUI组件中与状态管理结合使用。

你提供的代码就是一个很好的 setInterval 应用示例 - 实现了验证码倒计时功能，主要逻辑如下：

1. 使用 @State 装饰器定义了一个状态变量 times 用于存储倒计时时间
2. 点击"发送验证码"按钮时：
   • 检查如果倒计时正在进行（times != 0），则不执行任何操作
   • 初始化倒计时时间为60秒
   • 使用 setInterval 注册一个每秒执行一次的函数
   • 在定时器函数中，每秒将 times 减1
   • 当 times 减到0时，使用 clearInterval 清除定时器

这个实现遵循了HarmonyOS的状态驱动UI理念：当 times 发生变化时，UI会自动更新显示最新的倒计时时间。

需要注意的是，在组件销毁时，应该确保清除所有未完成的定时器，以避免内存泄漏。可以在组件的 onDisappear 生命周期中处理：

// 在组件中添加
private timer: number | null = null;

// 在点击事件中
this.timer = setInterval(() => {
  // ...
}, 1000)

// 组件消失时清除定时器
onDisappear() {
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null;
  }
}

这样的实现可以确保在页面跳转或组件销毁时，定时器能够被正确清理。

/*

• 页面上一切会变化代UI、结构 背后都是数据 数据-> ui结构、样式改变
• 1 定义一个状态 @State -> 表示倒计时的时间
• 2 给 按钮 注册点击事件
• 0 设置 时间 = 60
• 1 开启定时器
• 2 定时器内部： 时间–

•  定时器内部：  判断时间 等于 0
  

•   1 定时器停止
  

• */

@Entry
@Component
struct Index {
@State
times: number = 0

build() {
Column() {
this.titleBuilder()
TextInput({ placeholder: ‘请输入手机号’ })
.textInputExtend()
Divider()
Row() {
TextInput({ placeholder: ‘请输入验证码’ })
.textInputExtend()
.layoutWeight(1)
Text(this.times == 0 ? ‘发送验证码’ : ${this.times}秒后获取)
.fontSize(14)
.fontColor(Color.Gray)
.onClick(() => {
// 以下倒计逻辑，什么时候 可以执行 this.times
// 当时间等于 0 的时候 才执行 正常逻辑
if (this.times != 0) {
return
}

        this.times = 60
        let t = setInterval(() => {
          this.times--
          if (this.times == 0) {
            clearInterval(t)
          }
        }, 1000)
      })
  }
  .width('100%')

  Divider()

  Button('登录')
    .width('100%')
    .type(ButtonType.Normal)
    .backgroundColor('#ea6051')
    .margin({ top: 50 })
  // .enabled(false)

}
.padding({ top: 80, left: 40, right: 40 })
.width('100%')
.alignItems(HorizontalAlign.Start)

}

@Builder
titleBuilder() {
Text(‘短信登录’)
.fontSize(25)
.fontWeight(600)
.margin({ bottom: 30 })
}
}

@Extend(TextInput)
function textInputExtend() {
.backgroundColor(Color.White)
.padding({ left: 0, top: 20, bottom: 20 })
.placeholderColor(‘#ccc’)
}