Vue 防抖函數封裝和解析

防抖函數：

　　短時間內多次觸發同一事件，只執行最后一次，或者只執行最開始的一次，中間的不執行

　　使用：

　　　　1. 頁面加載圖片，每張圖片完成加載后會調用刷新功能，但如果不希望每次都執行刷新操作，可以使用防抖函數，實例1

　　　　2. 搜索框中輸入字符后會自動搜索相關內容，但如果不希望每個字符都去搜索，可以使用防抖函數

　　主要邏輯：　　　　

　　　　1. 將刷新功能包裝到自定義的防抖函數中，並調用debounce，接收它的return返回函數，生成新的函數對象refresh

　　　　2. 每張圖片被成功加載，都會自動觸發‘itemImageLoad’ 自定義事件，執行其中的refresh（）函數

　　　　3. 每次refresh（）被調用，會清除之前的timer定時器，並生成新的定時器（如果圖片加載慢，超過定時時間，則該定時器被執行，但需要等待主線任務結束才會返回執行結果）

　　　　4. 根據JS的異步任務解析，異步任務被調用，但需要等主線同步任務執行結束后才會返回其結果，所以只有所有圖片加載完成后，才會將異步結果返回到主線同步任務中，這其中根據setTimeOut的定時時間，會有一個或多個被成功執行的定時器返回結果

 

實例1：

　　mounted() {
      // 1. 將刷新操作包裝到防抖函數debounce中（調用防抖函數，返回一個函數，賦值給refresh生成函數對象，只生成一次該對象）
      const refresh = this.debounce(this.$refs.scroll.refresh, 50)
      // 2. 如果事件總線$bus中的事件（圖片加載完成事件）itemImageLoad被觸發，則執行包裝后的函數refresh（）
      this.$bus.$on('itemImageLoad', () =>{
        refresh()　　　　　　　　//refresh被執行，每調用一次refresh（），就執行return的函數對象一次，清除之前的定時器，生成新的定時器timer。注：整個debounce不會被重復調用，只是返回函數被多次使用
      })
    },
    methods:{
      debounce(func, delay){
        let timer = null
        // 使用...args 可以傳多個參數
        return function (...args) {　　　　　　　　　　// 1. 定義一個返回函數function
          if(timer) clearTimeout(timer)
          timer = setTimeout(() =>{
            func.apply(this, args)
          },delay)
        }
      },
    },