1. 在 data 中定义一个 setTimeout 的名字
data() {
return {
timer: null // 延时器的名字
};
},
2. 在 监听 input 输入事件的函数内编写如下代码:
methods:{
input(e){
// 每次触发输入事件的时候先清除定时器
clearTimeout(this.timer)
// 每隔 500毫秒 调用
this.timer = setTimeout(()=> {
console.log(e)
}, 500)
}
}
3. 完整代码如下:
注意我用的是 uni-search-bar 组件,这里我主要讲的是 输入框防抖处理,大家的样式可能跟我的不一样
<template>
<view>
<view class="search-box">
<!-- 监听 input 事件 -->
<uni-search-bar :focus="true" @input="input" :radius="100" :cancelButton="none"></uni-search-bar>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 定时器的名字
timer: null
};
},
methods:{
input(e){
// 每次触发 input 事件清除一次定时器
clearTimeout(this.timer)
// 每隔 500毫秒 触发定时器
this.timer = setTimeout(()=> {
console.log(e)
}, 500)
}
}
}
</script>
<style lang="scss">
</style>