setInterval 倒计时实现：60s 验证码发送逻辑

红烧大青虫2026-07-21 16:22

前言

在手机号登录中，验证码倒计时是常见的交互模式。"海风日记"使用 setInterval 实现 60 秒倒计时，并在页面销毁时清理定时器。

本文将从源码出发，深入讲解 setInterval 倒计时的实现。

一、倒计时实现

typescript 复制代码

@State codeSent: boolean = false
@State countdown: number = 0
private timer: number = -1

startCountdown() {
  this.codeSent = true
  this.countdown = 60
  this.timer = setInterval(() => {
    this.countdown -= 1
    if (this.countdown <= 0) {
      clearInterval(this.timer)
      this.codeSent = false
    }
  }, 1000)
}

二、定时器清理

typescript 复制代码

aboutToDisappear() {
  if (this.timer !== -1) {
    clearInterval(this.timer)
  }
}

三、按钮状态

状态	文字	颜色	启用
未发送	获取验证码	橙色	phone.length === 11
发送中	60s, 59s...	灰色	禁用
倒计时结束	获取验证码	橙色	phone.length === 11

四、enabled 条件控制

typescript 复制代码

.enabled(!this.codeSent && this.phone.length === 11)

五、常见问题

5.1 定时器未清理导致内存泄漏

问题：页面关闭后定时器仍然运行。

解决方案 ：在 aboutToDisappear 中清理定时器。

总结

本文通过"海风日记"的验证码倒计时，深入讲解了 setInterval 的使用：

setInterval 1000ms：每秒更新倒计时
clearInterval 清理：倒计时结束或页面销毁时
@State 驱动 UI：countdown 变化自动更新
按钮禁用：enabled 条件控制

下一篇文章将深入讲解 按钮 enabled 状态控制，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

setInterval API 文档
@State 装饰器文档
海风日记项目源码
$HarmonyOS 开发者官网$ (https://atomgit.com/openharmony/docs
开源鸿蒙跨平台社区