小程序搜索防抖处理 小程序在搜索处理时候都会考虑输入防抖和节流。在此记录一下我处理防抖功能代码，如果你有更好方案欢迎同我一起交流qwq。主要思路是使用计时器计算，再加上wx.showLoading和 wx.hideLoading等待效果直接扔代码(/= _ =)/~┴┴demo.wxml<view class="container"> <view class="dept-container"> <view class="section"> <input name="keyword" bindinput="bindKeywordInput" placeholder="请输入关键字" confirm-type="搜索" bindconfirm="search"/> </view> </view> <scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view class="scroll-view-item" wx:for="{{deptsData}}" wx:key="key"> <navigator url="/pages/card/card?class={{item.class}}" open-type="navigate" hover-class="none"> <text class="dept-name">{{item.class}}</text> <text class="dept-count">{{item.count}}</text> <image class="arrow" mode="aspectFit" src="/image/arrow.png"></image> </navigator> </view> </scroll-view> </view>demo.jsPage({ /** * 页面的初始数据 */ data: { keyword: '', deptsData: [], params: '', //搜索条件 countTime:1800, //延迟搜索 时间 searchWaiting: false, //是否等待搜索倒计时中 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getCustList(); }, /** * 查数据 */ getCustList: function() { var that=this; wx.showLoading({ title: '加载中', }); wx.request({ url: 'https://weixin.uuppp.top/applet/Depar/index', method:'post', data:{ss:that.data.params}, success:function(e){ console.log('成功的回调结果'); console.log(e); var arr=e.data; //关闭loading wx.hideLoading(); that.setData({deptsData:arr}); } }) }, /** * 输入关键字 */ bindKeywordInput: function (e) { this.setData({ countTime:1800, params:e.detail.value, }) //是否处于搜索倒计时中 if (!this.data.searchWaiting){ //console.log(e.detail.value); this.search(); } }, /** * 搜索 * 延迟搜索 */ search: function (e) { var that=this; this.setData({ searchWaiting: true }) let promise = new Promise((resolve, reject) => { let setTimer = setInterval( () => { console.log('搜索倒计时: ' + that.data.countTime); this.setData({ countTime: this.data.countTime - 1000 }) if (this.data.countTime <= 0) { console.log('开始搜索: ' + that.data.params); this.setData({ countTime: 1800, searchWaiting: false, }) resolve(setTimer) } } , 1000) }) promise.then((setTimer) => { that.getCustList();//获取班级列表 clearInterval(setTimer)//清除计时器 }) } }) demo.php(后台处理) /** * 所有班级+人数查询 */ public function index(){ //接值post是否有值：为空则查所有班级，不为空则接参模糊查询 $request=Request::instance(); $post=$request->post(); $arr=''; if($post['ss']!=''){ //trace($post,'搜索不为空传来的值'); $arr = Db::table('lr_wx_info')->field('class')->whereLike('class','%'.$post['ss'].'%')->group('class')->select(); }else { $arr = Db::table('lr_wx_info')->field('class')->group('class')->select(); } $data = [];//存 班级名+人数 foreach ($arr as $k => $v) { $count = Db::table('lr_wx_info')->where('class', $v['class'])->count(); $data[$k] = [ 'class' => $v['class'], 'count' => $count ]; } echo json_encode($data); }后台处理使用的是thinkphp5.0框架mysql