Ian Chen

有個需求是使用者在輸入框輸入時，必須出現自動完成的選項，並且選項要依照當前輸入的內容，透過API跟後端取得

若僅用watch監聽輸入框，會發生使用者每打一個字就會往後端打一次API的蠢事

為了避免這個問題，使用Lodash的防抖動功能來完成

---

環境

• Vue.js 2.X

• Webpack

• Axios

---

１．安裝lodash

npm i lodash -s

２．import

import _ from "lodash"

３．調整js，這邊分兩個部分

• 透過 lodash的方法 debounce 可以簡單的包裝目標方法
  • 第一個參數是一個function，這邊可以給 fucntion(){ ... }，也可以直接給一個定義好的method進去
  • 第二個參數是延遲的時間，在時間內method不會被觸發第二次，時間到了才會執行（單位是毫秒）
• 需求上會在html上執行包裝的method，為了讓IDE不會飄虛線找不到vue上的方法，所以在method上定義好有一個方法 getDataDebounced（沒預先定義執行也可以正常）
• 方法 getData 單純只是發出請求跟api拿資料而已

    created() {
        this.getDataDebounced = _.debounce(this.getData, 1000)
    },
    methods: {
        getDataDebounced() {
        },
        getData() {
            axios.get('<GetDataUrl>').then(response => {
                this.data = response.data;
            });
        },
    }

４．接著執行應用，想要的效果差不多就有了

---

原本是看教學影片看到的技巧，結果專案上馬上就用到，才發現當時的筆記沒做好，花了不少時間在查資料，於是事後趕緊補上紀錄一下

---

Lodash Debounce http://lodash.think2011.net/debounce