vue中搜索实现防抖

在输入框搜索时输入搜索内容中频繁搜索结果，影响浏览器性能。
原始写法：

<el-input
      v-model="input"
      @input="search"
      placeholder="请输入内容"
></el-input>
data() {
    return {
      input: "",
      timer: null,
    };
},
search() {
  // 执行搜索请求
  console.log(this.input);
}

可以简单处理一下，在特定时间内只执行一次搜索，用户在输入途中只要不停止输入就不会触发搜索请求。

<el-input
      v-model="input"
      @input="search"
      placeholder="请输入内容"
    ></el-input>
data() {
    return {
      input: "",
      timer: null,
    };
  },
search() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
         // 执行搜索请求
         console.log(this.input);
      }, 1000); // 设置时间
    },

封装一下

/**
 * 防抖
 * @param fn 传入方法
 * @param delay 传入时间
 * @使用闭包防止重复创建影响性能
 */
export default function (fn, delay) {
    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
            timer = setTimeout(fn, delay);
        } else {
            timer = setTimeout(fn, delay);
        }
    };
}