作用：

防抖的作用是：在事件被触发的n秒后执行回调，如果在这n秒内又被触发，则重新计时。

场景：

输入框中输入一个字，掉一次接口，搜索功能性能体验不好，加防抖

 

 

 

 

 

 解决方案加防抖

方法一

 

 

 在methods中定义debounce

    debounce(fn, delay) {
      let timer = null
      return function () {
        const context = this
        const args = arguments

        if (timer) {
          clearTimeout(timer)
          timer = null
        }

        timer = setTimeout(() => {
          fn.apply(context, args)
        }, delay)
      }
    },

方法二 封装 debounce

export function debounce(fn, delay) {
  delay = delay || 1000; //默认1s后执行
  let timer = null;
  return function() {
    let context = this;
    let arg = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(context, arg);
    }, delay);
  };
}

页面中引入

import {debounce} from "../../../../utils/index"

在使用（注意：外部引入函数不能直接在template中使用）

 

 使用