百宝箱系列之09篇：Vue中如何进行函数消抖

什么是函数抖动问题，不再过多介绍，只说刚刚用到的一个场景：

当需要根据内容进行表格数据的过滤时，不能允许每按下一个字符就去过滤一次，尤其是涉及到每次都需要异步调用后台接口时，更是不被允许，所以就有了函数消抖，延迟一定的时间进行查询，如果在延迟倒计时内再次触发，那么重新开始倒计时。话不多说：

定义消抖函数：

	//防抖函数
    // 非立即执行版
    debounce(func, wait) {
      let timer;
      return function () {
        let args = arguments; // arguments中存着e
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args)
        }, wait)
      }
    },

如何调用呢？

	//过滤人员名称
    filterName() {
      this.debounce(() => {
        this.list= this.sourceList.filter(item => item.name.includes(this.filterWord));
      }, 500)();
    },

HTML部分举例：

<el-input placeholder="请输入中文名称检索" v-model="filterWord" 
@input="filterName()" style="width:50%"></el-input>

只要在@input事件中调用filterName()方法，则会调用消抖函数，从而在500ms后进行人员过滤，如果调用后台接口查询数据，原理一样

注意：千万不要漏掉this.debounce(() => { }, 500)(); 最后的那一对小括号，因为加了才是方法调用，如this.functionA()，因为这个导致方法不执行，问题找了好一会儿

所以从侧面说明，在进行日常开发时，对于这种形式的，一定要在声明时就写出完整格式，然后再往里面填充方法参数的内容，不要从头到尾写到最后给忽略了。

最后，留下一个小问题：上述给出的消抖函数不是立即执行的版本，那么如何改造才能达到先执行，然后再进行倒计时的效果呢？