微信小程序输入框防抖实现

492 阅读1分钟

微信小程序需如何实现输入框的防抖功能

为什么要防抖?

如果不做防抖,只要输入 内容就会不停的向服务端发送请求,造成请求次数过多

实现步骤

1.首先给输入框绑定事件

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

2.定义一个变量,来记录定时器的返回值

js
    let timer = null
    Page({
        data:{},
    })

在触发bindInput时,先清除定时器,然后再设置一个定时器,发送请求

    bindInput (e) {
        const {value} = e.detail  //拿到输入框中的值
        clearTimeout(timer) 
        timer=setTimeout(()=>{
            this.search(value)
        },500)

    },
    
    search (value) {
        //your code  在这发送请求
    }