节流是在一定时间内只触发一次函数,所以可能会遗漏搜索框中最终的内容,而函数防抖是在最后一次事件即用户停止输入后才触发一次函数,因此搜索框用防抖比较好。
let isSend =null //全局定义一个定时器
...
...
handleinput(e){
let content =e.detail.value.trim();
this.setData({
content:content
})
// 函数防抖
clearTimeout(isSend)//输入时不断清除前一个定时器
isSend=setTimeout(() => { //新建一个定时器,直到用户不输入后才执行最后一个定时器
if(content){//当用户删除输入框数据的时候不请求
this.getSearchlist()//输入完0.4s后请求数据
}
},400)},
//请求数据的函数
async getSearchlist(){
let searchlist = await request('/cloudsearch',{keywords:this.data.content,limit:10})
this.setData({
searchlist:searchlist.result.songs
})
},