[vue] debounce 사용하기 feat.(throttle)

debounce와 throttle의 공통 키워드로는 '연속성' 입니다.

우리는 특정 함수를 호출할 시,

이벤트리스너와 관련된( ex: scroll )함수를 호출할 시

해당 이벤트들이 너무 연속적으로 수행될 때가 있습니다.

 

debounce와 throttle은 이를 방지하기 위한 기술입니다.

 

 - debounce

    이벤트를 호출한 후, 일정시간이 지나야 해당 실행문장을 실행합니다

    => 키를 입력하면 값이 출력되는 이벤트를 호출한다 가정했을시,

         마지막에 입력했을 때를 기점으로 설정한 시간만큼 재호출이 없어야 실행문장이 실행됩니다.

 

 - throttle

    이벤트를 호출한 후, 실행문장을 한 번 실행하고, 

    설정한 시간만큼은 재호출을 해도 응답하지 않습니다.

 

---

 

<template>
  <input type="text" v-model="debounceValue" @keyup="debounceMethods($event)">
  <input type="text" v-model="throttleValue" @keyup="throttleMethods($event)">
</template>

<script>

import { debounce, throttle } from 'lodash'
export default {
  name: 'App',
  data() {
    return {
      debounceValue: '',
      throttleValue: ''
    }
  },
  methods: {
    debounceMethods: debounce((event) => {
      console.log(event.target.value)
    },2000),
    throttleMethods: throttle((event) => {
      console.log(event.target.value)
    },2000)
  }
}
</script>

 

 

---

 

1. lodash를 설치 후 가져와 사용

2. debounce는 이벤트 호출 후, 2초동안 추가 호출이 없다면 실행문장이 실행된다.

 

3. throttle은 이벤트 호출 후, 실행문장을 실행한다. 그 다음 2초동안 제일 마지막으로 호출한 명령을 수행한다.

 

 

 

 

---

 

eventListener로 이벤트를 줄 시에 위 기능을 쓰고 싶다면

window.addEventListener('scroll', throttle(() => {
        실행문장();
    }, 1000));