应用场景:
1、重复请求接口
用户在输入框输入时,触发keyup事件,会多次调用同一个接口,实际需求是输入完再请求后端接口
2、实现思路
调用setTimeout
计时器,在延迟时间内输入会清空计时器,等待下一次输入
实现代码
data() {
timeClear: '',
key: ''
},
methods: {
search(val) {
let delay = 1000//延迟时间
if(this.timeClear) {
clearTimeOut(this.timeClear)
}
this.timeClear = setTimeout(()=>{
this.key = val//最终输入的内容
this.getList()//重新获取列表数据
},delay)
},
async getList() {
const This = this
const {data} = await this.$https({
methods:"GET",
url:'xxx?page=xxx&pagesize=xxx&key='+This.key
}).then((result)=>{
return result.data
})
console.log('得到的数据',data)
}
}