在开发中都会有搜索框,相对于输入内容之后点击搜索或者回车搜索,模糊查询的用户体验会好一些,而小程序的模糊查询只能通过bindinput 事件来绑定,而小程序没有类似与VUE的.lazy修饰符之类的,也就意味着给bindinput事件绑定搜索事件的话每一次按键都会触发请求,所以需要对其进行简单的节流操作。
JS部分
searchinput(e) {
// 搜索节流
const now = Date.now() // 现在时间
const delay = 1500 // 延迟时间
const main = () => { // 执行函数
const search = e.detail.value // 输入的搜索内容
// 进行模糊查询获取数据
request.post("/url", {
keyWord: search,
pageNow: 1,
pageSize: 10
}).then( res => {
console.log(res)
}).catch( err => {})
}
// 延迟进行数据请求
if (this.searchinput.timeStamp && (now - delay <= this.searchinput.timeStamp)) {
clearTimeout(this.searchinput.time)
this.searchinput.timeStamp = now
this.searchinput.time = setTimeout(main, delay)
} else{
this.searchinput.timeStamp = now
this.searchinput.time = setTimeout(main, delay)
}
},