#Vue 节流函数

问题描述

在工作中，根据用户的输入来过滤数据，在<el-input>组件中触发@input事件，如果每次触发事件，就导致处理逻辑的频率非常的高，因此，需要采用节流函数来处理逻辑

案例

<el-input
    placeholder="输入关键字搜索列，包含关键字即可"
    suffix-icon="el-icon-search"
    @input="searchInputChage"
    v-model="searchInput"
></el-input>

<el-input> 要实事触发事件，不能使用官方文档中的 change事件，因为做了优化，也是使用节流函数，因此，使用input事件来做逻辑处理

export default {
  name: 'HelloWorld',
  data () {
    return {
      // 设置定时器的句柄，用来缓存的
      timer: null,
      searchInput: '',
    };
  },
  methods: {
    searchAction: function () {
      console.log('我是具体处理逻辑的方法')
    },
    fnThrottle (method, delay, duration) {
      var that = this;
      var timer = this.timer;
      var begin = new Date().getTime();
      return function(){
        var context = that;
        var args = arguments;
        var current = new Date().getTime();
        clearTimeout(timer);
        if(current-begin>=duration){
          method.apply(context,args);
          begin=current;
        }else{
          console.log(delay)
          that.timer=setTimeout(function(){
            method.apply(context,args);
          },delay);
        }
      }
    },
    // input change触发的事件
    searchInputChage: function () {
      this.fnThrottle(this.searchAction, 1000, 1000)();
    }
  }
}