微信小程序 防抖

主要我做的是搜索页面

引入 Lin UI gei 下来       

git clone https://github.com/TaleLin/lin-ui.git

自己引入搜索组件

/*函数防抖*/
  
  function debounce(fn, interval) {
  
    var timer;
  
    var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
  
    return function () {
  
      clearTimeout(timer);
  
      var context = this;
  
      var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
  
      timer = setTimeout(function () {
  
        fn.call(context, args);
  
      }, gapTime);
  
    };
  
  }
module.exports = {
  throttle,
  debounce
}

js 文件中引入 const util = require("../../utils/util.js");

防抖代码

 TiemID:-1,
  search(e){
    let name = e.detail.value;
    let _this = this;
    clearTimeout(_this.TiemID);
    _this.TiemID = setTimeout(()=>{
      wx.request({
        url: 'http://www.doub.com/home/search',
        data:{name:name},
        method:"GET",
        success(res){
          let movies = res.data.data
          _this.setData({
            movies
          })
        }
      })
    },1000);
  }

wxml

<l-search-bar bind:linchange="search" placeholder="搜索"/>
<view wx:for="{{movies}}" wx:key="index" wx:for-item="item">
  <l-card type="primary" full="{{true}}" image="{{item.img}}" title="{{item.name}}" bindtap="click" data-id="{{item.id}}">
    <view class="content">
      {{item.account}}
    </view>
    <view class="movie-name">
      <l-rate class="l-rate" score="{{ item.score }}" size="{{25}}"></l-rate>
      <text>{{ item.score }}分</text>
    </view>
  </l-card>
</view>

wsxx

/* pages/list/list.wxss */
.page-header {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.page-title {
  padding: 20rpx 40rpx;
  color: #999;
  font-size: 38rpx;
  text-align: center;
}
.page-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.item {
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #eee;
  cursor: pointer;
}
.item .poster {
  width: 128rpx;
  height: 128rpx;
  margin-right: 20rpx;
}
.item .meta {
  flex: 1;
}
.item .meta .title,.item .meta .sub-title {
  display: block;
  margin-bottom: 15rpx;
}
.item .meta .title {
  font-size: 32rpx;
}
.item .meta .sub-title {
  font-size: 22rpx;
  color: #c0c0c0;
}
.item .meta .artists {
  font-size: 26rpx;
  color: #999;
}
.item .rating {
  font-size: 28rpx;
  font-weight: bold;
  color: #f74c31;
}
.tips {
  font-size: 28rpx;
  text-align: center;
  padding: 50rpx;
  color: #ccc;
}
.tips image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.tips image,.tips text {
  vertical-align: middle;
}