(小程序篇)10.防抖&节流

1.防抖

说明：小程序表单输入内容this.setData次数过于频繁，导致性能下降。
util.js 工具文件

const debounce = function (func, wait) {
    let timer;
    return function() {
        let context = this; // 注意 this 指向
        let args = arguments; // arguments中存着e
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args)
        }, wait) 
    }
}
export {
	debounce
}

index.wxml 页面开发

<input type="text" bindinput="sendVal" placeholder="输入内容" />

index.js js开发

data: {
  content:'',
},
// 输入内容
sendVal: debounce(function(e){
  this.setData({
    content: e.detail.value
  })
},1000)

说明：用户进行内容输入，1s内不输入内容则进行一次this.setData操作。

2.节流

说明：分页操作时候，用户不停往下拉，造成接口调用过于频繁。
util.js 工具文件

const throttle = function(func, wait) {
    let timeout;
    return function() {
      let context = this;
      let args = arguments;
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null;
          func.apply(context, args)
        }, wait)
      }
    }
}
export {
	throttle
}

3.测试案例

说明：上拉加载&下拉刷新&点击事件
PS:这里案例只出示上拉加载和点击

index.wxml 案例结合lin-ui的slide-view组件，之前章节有介绍。

<view class="slide">
  <block wx:for="{{list}}" wx:key="index">
    <l-slide-view auto-close="{{true}}" bind:lintap="del" data-index="{{index}}" height="140" width="750" slide-width="140">
      <view bind:tap="clickItem" slot="left" class="left">
        {{item.desc}}
      </view>
      <view slot="right" class="right">
        <text>删除</text>
      </view>
    </l-slide-view>
  </block>
</view>

index.js

// 导入工具
import { throttle } from '../../utils/util'
page({
	...
	data: {
      list: [
        {desc:'初始化数据1',num:1},
        {desc:'初始化数据2',num:2},
        {desc:'初始化数据3',num:1},
        {desc:'初始化数据4',num:3},
        {desc:'初始化数据5',num:4},
        {desc:'初始化数据6',num:1},
        {desc:'初始化数据7',num:2},
        {desc:'初始化数据8',num:4},
        {desc:'初始化数据9',num:1},
        {desc:'初始化数据10',num:2}
      ]
    },
    // 发生了点击事件
    clickItem:throttle(function(){
      console.log('发生了点击')
    },1000),
    mockAddData(){
      let temp = [
        {desc:'添加数据1',num:1},
        {desc:'添加数据2',num:1},
        {desc:'添加数据3',num:1},
        {desc:'添加数据4',num:1},
        {desc:'添加数据5',num:1},
        {desc:'添加数据6',num:1},
        {desc:'添加数据7',num:1},
        {desc:'添加数据8',num:1},
        {desc:'添加数据9',num:1},
        {desc:'添加数据10',num:1},
      ]
      this.setData({
        list:[...this.data.list,...temp]
      })
    },
    // 上拉加载
    onReachBottom: throttle(function () {
      this.mockAddData()
    },1000)
	...
})