- 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
- 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
h5部分:【bindinput绑定即可】
<input type="number" bindinput="phoneNum"
placeholder='请输入手机号' placeholder-style="text-align:center" />
js部分:
phoneNum(e) {
let timer;
let keyWord = e.detail.value ? e.detail.value : null
let that = this;
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
if (keyWord == null) {
//这里表示 如果搜索框中没有数据的话,做的一些处理
console.log('输入框为空');
} else {
//这里是搜索框中有值的情况,可以直接请求搜索接口即可
// console.log(keyWord);
}
}, 5000)
that.setData({
phoneNum: keyWord,
timer: null
})
}
用户输入5秒后再拿value值
uni部分重写:【暂且不太对,后期再改,凑和用一下,有时间封装一个完善点的】
<input type="text" @input="userNameInput" placeholder="名字"/>
//获取用户名输入内容
export default {
data() {
return {
//输入的用户名
userName: '',
}
},
userNameInput(e) {
let timer;
let keyWord = e.detail.value ? e.detail.value : null
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
if (keyWord == null) {
//这里表示 如果搜索框中没有数据的话,做的一些处理
this.userName = null,
console.log('输入框为空,提示信息未输入完整');
} else {
//这里是搜索框中有值的情况,可以直接请求接口即可
//一秒后将输入框中的内容传给 this.userName
this.userName = keyWord,
timer = null
}
}, 1000)
},