[Vue.js/라이브러리] debounce

 

◽ 설치하기

npm i vue-debounce

 

 

◽ debounce란?

연이어 함수가 호출될 때 가장 마지막이나 가장 처음의 1회만 이벤트가 발생하도록 하는 기술이다.

예를 들어, 검색어를 입력할 때 하나의 모음/자음을 입력할 때 마다 API를 호출하는 것은 비효율적이고 과도한 비용을 들게 한다. 따라서 사용자가 타이핑을 마쳤다고 생각하는 지점에서 호출해야한다. 기존에 발생한 이벤트(=사용자가 검색어를 입력할 때 발생한 이벤트)를 하나로 묶은 상태에서 가장 마지막으로 호출된 시점에서 API를 호출하면 되는 것이다.

 

 

◽ 예제

📄 main.js

import vueDebounce from "vue-debounce";

Vue.use(vueDebounce);

 

📄 test.vue - HTML 영역

<input
	v-model="keyword"
	@input="debounceInput"
	placeholder="검색어를 입력하세요."
/>

 

📄 test.vue - <script> 영역

<script>
import { debounce } from "vue-debounce";

export default {
  name: "Debounce",
  data() {
    return {
      keyword: "",
      lastedKeyword: "",
    };
  },
  methods: {
    // 화살표함수를 사용하면 작동하지 않는다. 이유는 찾아봐도 모르겠다...
    // debounce([function], 시간)
    debounceInput: debounce(function (e) {
      // input의 입력값을 keyword에 binding 한다.
      this.keyword = e.target.value;
      this.lastedKeyword = this.keyword;
    }, 300),
  },
};
</script>

 

+) 추가 (2022.01.17)

 

화살표 함수가 작동하지 않는 이유는 아마도 이것 때문인 듯 하다.

내가 찾는 this는 그 this가 아닌 듯...

 

 

 

출처 및 참조

https://www.npmjs.com/package/vue-debounce

🌟 JavaScript로 Debounce 함수 구현하기

https://v3.ko.vuejs.org/api/options-data.html#computed

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.