作用：

防抖的作用是：在事件被觸發的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中使用）

使用