debounce function常用於處理事件觸發後的call back function
當一項監聽事件被快速連續觸發時，為避免接著連續執行N個call back function
此時debounce就派上用場了！
常見好用的js utility library 「Lodash」亦提供了debounce function
為減低專案import的外部資源，我選擇不使用lodash，改用vue-debounce
(其實原本有先嘗試單一引入lodash.debounce，但最後整合失敗了...)
安裝
npm i vue-debounce --save
各種使用方法在vue-debounce內有指引
我採用最簡單的「Using Just Debounce」，程式碼如下
<script>
import { debounce } from 'vue-debounce'
export default {
methods: {
debounceTextChange: debounce(function () {
//don't use arrow function
this.$emit('text-change', this.editedContent)
}, 3000),
}
}
</script>
寫法同常見的debounce function，為
debounce(call_back_func, time-ms)
提醒一點，在call_back_func撰寫上，不要使用arrow function表達
會造成this Object抓不到Ovo