小程序搜索防抖处理

小程序在搜索处理时候都会考虑输入防抖和节流。

在此记录一下我处理防抖功能代码，如果你有更好方案欢迎同我一起交流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.js

Page({

    /**
     * 页面的初始数据
     */
  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