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

防抖

在小程序上使用之前得先介绍一下防抖。无非就是将一个频繁的操作延迟触发并且同时减少触发次数。
本质就是利用闭包保存定时器数据，并且在延迟时间内频繁触发会清除上一次的定时器操作。最后能触发的只能是触发事件之后的延迟时间内不再进行触发事件，则该在延迟时间结束后事件执行。（假设定时器设置的延迟时间为 500ms，第一次触发事件，第二次触发事件和第一次的时间间隔小于500ms，则清除第一次事件的触发，第三次触发事件和第二次的时间间隔若小于 500ms，则第二次不执行，… 直到第N次触发事件后的 500ms 不进行事件的触发，则第N次事件执行）

/*** 防抖函数* @param {Function} fn 需要进行防抖的函数引用* @param {Number} wait 延迟时间*/
function debounce(fn, wait) {let timer;  // 关键return function () {  // 最终交由输入框执行的是这个返回函数，而不是debounce(fn,wait)，关键clearTimeout(timer); // 清除上一次的定时器timer = setTimeout(() => {   // 设置新的定时器fn.apply(this, arguments)  // 执行需要执行的防抖函数（例如输入事件）}, wait); // 设置延迟时间}
}

微信小程序输入事件防抖

注：本次例子是在小程序中封装的输入框组件，请结合自己需求进行相应灵活更改。
输入框组件的 data 对象

  /*** 组件的初始数据*/data: {// 延迟时间毫秒delay: 500,// 执行防抖函数的返回函数引用delayFun: null,},

首先必须有一个防抖函数（这是废话），可用上面的防抖方法。

/*** 防抖*/debounce(fn, delay) {let timer = null;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn.apply(this, arguments);}, delay);}},

触发父组件的事件（仅在自己封装的输入框组件内可使用）

   /*** 向父组件触发 input 事件，可携带参数* @param {String} eventName 事件名称* @param {Any} value 传递的参数*/triggerEventToFather(eventName, value) {this.triggerEvent(eventName, value);}

执行防抖函数以获取防抖函数中的返回函数。
这个关键，因为输入框输入事件进行防抖的是 debounce(fn,delay) 这个函数中的 return 出来的返回函数。

    // 执行防抖函数handleDebounceFn(debounceFn, ...arg) {return debounceFn(arg[0], arg[1]);},

在组件的生命周期钩子中实现防抖函数以获取返回函数

lifetimes: {// 组件创建完成attached: function () {// 执行防抖函数，返回函数（防抖函数的返回函数）// 注：this.handleDebounceFn(第一个参数是防抖函数，第二个参数是需要进行防抖的方法这里指的是触发父组件的函数，第三个参数是延迟时间) 返回的是防抖函数执行后的返回函数，最后保存函数引用交由输入框的输入事件执行，则整个输入防抖完成。let delayFun = this.handleDebounceFn(this.debounce, (eventName, value) => {this.triggerEventToFather(eventName, value)}, this.data.delay);// 将this.handleDebounceFn 函数的返回的函数引用保存到 data 中。this.setData({delayFun})},},

输入框的输入事件

    // 输入框的事件handleInput(e) {// 防抖-输入// 执行 data 中的 delayFun 函数this.data.delayFun("search-input", e.detail.value);},

在父组件中触发 search-input 事件即可。

微信小程序实现输入框防抖相关推荐

微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序自定义输入框个数
一.使用到的知识点 1.微信小程序Number()和parseInt() 2.colorui的var组件 3.wx.setStorageSync保存至本地缓存二.关键源码 <view clas ...
华为手机微信小程序 input输入框上移
不知道大家有木有遇到过微信小程序的input 调起输入法的时候会被挤上去输入框跑到上面去了无论css怎么写怎么布局还是会跑上移尤其是测试mm的华为手机别的手机都OK的解决的方法是给i ...
微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
场景: 微信小程序真机中 textarea输入框内有很多文字,从中间删除文字,速度快的时候,光标会从中间跳到最后位置! 原因: input.textarea事件中,给input框绑定任何事件后,在处理 ...
微信小程序实现输入框与文本框数值联动效果
本篇文章主要讲解微信小程序下,input输入框输入后,页面中的文本信息进行即时更新联动的效果实现方法日期:2022年10月4日作者:任聪聪一.效果演示二.实现思路给input框进行绑定函数, ...
微信小程序: input输入框placeholder样式的修改
相信大伙在开发微信小程序的时候都会遇到这种问题.因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改.接下来告诉大家怎么修改,该方法仅适用于微信小程序. 一.我们要给pl ...
微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
微信小程序input输入框关键字自动联想及关键字高亮
找了好多博客都没有找到关于小程序,模糊查询,自动联想,和关键字高亮显示的文章,没办法,自己造吧. 本文采用的是动态联想,即在input框中输入关键字后,将关键字作为条件去数据库查询,然后将所有查询结果 ...

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

防抖

微信小程序输入事件防抖

微信小程序实现输入框防抖相关推荐

最新文章

热门文章