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

前言在手机号登录中验证码倒计时是常见的交互模式。海风日记使用setInterval实现 60 秒倒计时并在页面销毁时清理定时器。本文将从源码出发深入讲解 setInterval 倒计时的实现。一、倒计时实现StatecodeSent:booleanfalseStatecountdown:number0privatetimer:number-1startCountdown(){this.codeSenttruethis.countdown60this.timersetInterval((){this.countdown-1if(this.countdown0){clearInterval(this.timer)this.codeSentfalse}},1000)}二、定时器清理aboutToDisappear(){if(this.timer!-1){clearInterval(this.timer)}}三、按钮状态状态文字颜色启用未发送获取验证码橙色phone.length 11发送中60s, 59s…灰色禁用倒计时结束获取验证码橙色phone.length 11四、enabled 条件控制.enabled(!this.codeSentthis.phone.length11)五、常见问题5.1 定时器未清理导致内存泄漏问题页面关闭后定时器仍然运行。解决方案在aboutToDisappear中清理定时器。总结本文通过海风日记的验证码倒计时深入讲解了 setInterval 的使用setInterval 1000ms每秒更新倒计时clearInterval 清理倒计时结束或页面销毁时State 驱动 UIcountdown 变化自动更新按钮禁用enabled 条件控制下一篇文章将深入讲解按钮 enabled 状态控制敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源setInterval API 文档State 装饰器文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区