微信小程序如何实现搜索框的防抖功能

微信小程序如何实现搜索框的防抖功能

1、首先给输入框绑定一个bindinput事件，只要输入框内的值改变就会触发该函数

	<input  
	  placeholder="请输入您要搜索的内容" 
	  bindinput="handleInput"
	> 
	</input>

2、定义一个变量timeId，该值为定时器的返回值，作用是方便等会儿清除定时器。

3、在handleInput函数中先清除定时器，然后再设置一个定时器，发送请求，就实现了防抖功能。

timeId:0，

//输入框内的值改变就会触发该函数
 handleInput(e) {
 		const {value} = e.detail  //拿到输入框中的值
        clearTimeout(this.timeId) //清除定时器
        this.timeId=setTimeout(()=>{
            this.search(value) //发送请求，间隔时间为1s
        },1000)
    },
    
 //向后台发起搜索的request请求
 search(value) {
        const {data} = request({url: '地址', data: {value}})
        console.log(data)
    }