小程序实现防抖功能
防抖:防止某一时间频繁触发
作用:减少数据库请求,提高用户体验
demo:
WXML
<input type="text" placeholder="请输入搜索内容" name="search" bindinput="search"/>
<view wx:for="{{newArr}}" wx:for-index="key">
{{newArr[key]}}
</view>
WXJS
data: {
timer:'',
newArr:[],
arr:[
'口罩','一次性口罩','医用口罩','防尘口罩','加厚口罩','保暖口罩',
'空调','站式空调','挂式空调'
]
},
search(evt){
clearTimeout(this.data.timer)
this.data.timer=setTimeout(()=>{
let search=evt.detail.value;
let newArr=[];
if(search==''){
this.setData({newArr:[]})
return
}
for (let index = 0; index < this.data.arr.length; index++) {
if(this.data.arr[index].search(search)!=-1){
newArr.push(this.data.arr[index])
}
}
this.setData({newArr})
},3000) //三秒出现
},
实现效果:搜索结果是根据搜索框中的值每3秒出现一次,即 有时间间隔