前置准备-学习定时器 setTimeout 和 setInterval
一、定时器概念
日常开发中如果需要代码延迟一会执行，或者每隔一段时间执行一次，就可以使用定时器。
定时器有两种:
- setTimeout: 延迟执行-延时器
- setInterval: 间隔执行-定时器
1.1 setTimeout 可以用来设置一个延时器，当设置的时间到了之后就会去执行指定的函数（执行次数：1次）
setTimeout与clearTimeout绑定使用，clearTimeout作用：清除已加载的延时器（当开启延时器后，延时器将会返回自身的id，clearTimeout拿到延时器的id可将setTimeout在未执行逻辑前将其（setTimeout）清除）。
setTimeout、clearTimeout是一个全局函数，可以直接使用。
// 1. 基本使用
setTimeout(()=>{
// 延时执行的逻辑
},时间)
// 2. 获取返回的延时器 id
const timeId = setTimeout(()=>{
// 延迟执行的逻辑
},时间)
// 3. 根据定时器 id 清除延时器
clearTinmeout(timeId)
下面我们用两个按钮来了解延时器的工作流程
使用步骤
- 延迟执行逻辑
- 获取返回的 延时器 id
- 通过延时器 id清除已开启的延时器
timeId?: number//定义一个变量来获取定时器的id
Button('开启延时器')
.onClick(() => {
// 开启延时器
let timeId = setTimeout(() => {
// 延迟执行逻辑
console.log('代码执行啦')
}, 2000)
// 保存定时器 id
this.timeId = timeId
})
Button('关闭延时器')
.onClick(() => {
// 调用 clearTimeout 清除定时器
clearTimeout(this.timeId)
})
}
1.2 setInterval 也是可以用来设置一个定时器，根据设置的时间间隔来执行指定的函数(执行次数：无限次，根据设定的时间间隔重复执行)
setInterval、clearInterval绑定使用，clearInterval的作用：清除已加载的定时器
setInterval、clearInterval是一个全局函数，可以直接使用
// 1. 基本使用
setInterval(()=>{
// 延迟执行的逻辑
},时间)
// 2. 获取返回的定时器 id
const timeId = setInterval(()=>{
// 延迟执行的逻辑
},时间)
// 3. 根据定时器 id 清除定时器
clearInterval(timeId)
下面我们用两个按钮来了解定时器的工作流程
- 间隔执行逻辑
- 获取返回的 定时器 id
- 通过定时器 id 清除已开启的定时器
timeId?: number//定义一个变量来获取定时器id
Button('开启延时器')
.onClick(() => {
this.timeId = setInterval(() => {
console.log('代码执行啦~')
}, 2000)
})
Button('关闭延时器')
.onClick(() => {
clearInterval(this.timeId)
})
二、获取验证码案例
接下来通过刚刚学习的定时器，来完成一个获取验证码的倒计时功能
需求:
1. 获取验证码
a. 点击按钮之后，延迟 2 秒（setTimeout）
b. 获取一个 4 位的随机数，通过弹框显示出来(AlertDialog.show({message:}))
c. 获取随机数方法，Math.floor(1000+Math.random()*9000)
2. 倒计时效果
a. 点击开启倒计时
ⅰ. @State time = 0
1. 点了之后->60
ⅱ. setInterval
1. time--
2. time==0 关闭定时器
b. 切换显示效果
ⅰ. 默认：发送验证码
ⅱ. 倒计时中：xx 秒后获取
ⅲ. 根据 time 是否为 0 来决定
1. 0：发送验证码
2. 不为 0：xx 秒后获取
c. 倒计时中无法重复点击
ⅰ. 时间为 0 时：可以点击
ⅱ. 时间不为 0 时：不可以点击
@Entry
@Component
struct LoginDemo {
@State time: number = 0
build() {
Column() {
this.titleBuilder()
TextInput({ placeholder: '请输入手机号' })
.textInputExtend()
Divider()
Row() {
TextInput({ placeholder: '请输入验证码' })
.textInputExtend()
.layoutWeight(1)
Text(this.time == 0 ? '发送验证码' : `${this.time}秒后获取`)
.fontSize(14)
.fontColor(Color.Gray)
.onClick(() => {
// 避免倒计时 为 0 时，重复点击
if (this.time != 0) {
return
}
this.time = 60 //注意：测试时修改这里的number可以避免等待较长时间
const timeId = setInterval(() => {
this.time--
// 倒计时结束，清空定时器
if (this.time == 0) {
clearInterval(timeId)
}
}, 1000)
//定时器清除后通过setTimeout延时两秒执行随机数
setTimeout(() => {
AlertDialog.show({ //通过UI弹窗的方式将4位随机数显示
message: Math.floor(1000 + 9000 * Math.random())
.toString()
})
}, 2000)
})
}
.width('100%')
Divider()
Button('登录')
.width('100%')
.type(ButtonType.Normal)
.backgroundColor('#ea6051')
.margin({ top: 50 })
}
.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')
}
以上就是所有内容啦，后续会继续拓展（登录前的验证）
