Throttle, Debounce 차이

throttle과 debounce는 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 이벤트를 제어(제한)하는 방법

• debounce

그룹화된 이벤트가 특정시간이 지난 후 하나의 이벤트만 발생하도록하는 기술

연이어 호출되는 함수들 중 마지막 함수만 호출하는 것

• throttle

이벤트를 일정한 주기마다 발생하도록 하는 기술
throttle의 설정시간을 1ms로 주게되면 해당 이벤트는 1ms동한 최대 한번 발생

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

<template>
  <div>
    <input type="text" @keyup="handleKeyup">
  </div>
</template>
<script>
export default {
  methods: {
    handleKeyup(e) {
      this.throttleMethods(e)
      this.debounceMethods(e)
    },
    throttleMethods: _.throttle((e) => {
      console.log('throttle', e.target.value)
    }, 1000),
    debounceMethods: _.debounce((e) => {
      console.log('debounce', e.target.value)
    }, 1000)
  }
}
</script>

콘솔이미지를 보면 throttle은 설정된 주기인 1초마다 이벤트가 실행되고,

debounce는 연속된 이벤트가 끝나고 설정된 주기인 1초 뒤 이벤트가 한번 실행된다

스크롤이벤트 혹은 타이핑이벤트 등 적절한 곳에 사용하면 리소스를 절약할 수 있다.

참고
https://webclub.tistory.com/607 https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa