防抖- 微信小程序输入框input

微信小程序input输入框的bindinput，每输入一个字符都会触发一次，为了避免频繁触发bindinput绑定的函数，可采用”防抖“功能。

防抖：在执行bindinput时，第一次触发时，会先设置一个定时器，比如定时1000ms(1秒），在定时器1000毫秒之后，才执行bindinput绑定的函数，即延迟了函数的执行时间，第二次触发时，如果两次时间间隔小于1000毫秒，则清除上一次的定时器（即取消第一次的函数执行），然后设置新定时器，即定时1000毫秒后进行第二次函数操作，以此类推，直至最后一次执行bindinput时，在定时器时间结束时，执行bindinput绑定的函数。

一下代码未进行时间间隔判断，大家可以自行加入。

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)}

防抖- 微信小程序输入框input相关推荐

微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,有效值:text,number,idcard,dig ...
小程序中里的bindinput_微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 valueString 输入框的内容 typeStringtextinput的类型,有效值:text,number,idcard,digit,time ...
微信小程序输入框 input 组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 输入框.该组件是原生组件,使用时请注意相关限制属性类型默认值必填说明最低版本 value string 是输入框的初始内容 1 ...
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
微信小程序输入框会字体显示不全或者换行
微信小程序输入框会字体显示不全或者换行问题描述有的时候不同的设备上会出现微信小程序输入框表现不一致,比如:换行,字体显示不全解决方案用开发者工具调试发现,input,textarea 有默认的 ...
微信小程序输入框上移问题
微信小程序输入框上移问题缺陷:输入框顶起整个页面包括自定义顶栏解决方式:给input设置adjust-position="{{false}}"后自定义input高度 wxml ...
微信小程序获取input输入的值
微信小程序获取input输入的值 view <view><text>姓名:</text><input type='text' name="user ...
微信小程序之input 边框
微信小程序之input 边框文章目录微信小程序之input 边框一.边框:border 设置对象边框的特性. 二.相关属性一.边框:border 设置对象边框的特性. 语法:border:le ...
微信小程序电话号码input框的正则校验
微信小程序电话号码input框的正则校验 1.wxml <view class="mobile"><sapn c ...

防抖- 微信小程序输入框input

防抖- 微信小程序输入框input相关推荐

最新文章

热门文章