[JavaScript] 디바운스(Debounce) vs 스로틀(Throttle)

✅ 공통점

• 짧은 시간에 여러번 발생하는 이벤트를 그룹화해서, 과도한 이벤트 호출을 방지
  • 엄청나게 빠른속도로 클릭을 여러번 하기
  • 검색창에 키보드로 입력하기
  • 스크롤바를 위아래로 쭉쭉 움직이기
  • 창을 리사이징하기
  • 등등...

 

✅ 디바운스 (Debounce)

• 요청이 들어오면 일정시간을 기다린 후 요청을 수행하는데,
  기다리는 동안 같은 요청이 추가로 들어오면 이전 요청은 취소됨
  • 연이어서 호출되는 함수 중 가장 마지막(또는 가장 처음)만 호출 되도록 함
  • 쉼없이 계~~~속 클릭하면 클릭이 멈출때까지 기다렸다가 멈추면 실행함
  • 그래서 만약 무한 입력을 하면 무한 기다림을 함
• toggle 버튼 이벤트 등에 주면 좋음

 

function debounce(callback, limit = 100) {
    let timeout
    return function(...args) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            callback.apply(this, args)
        }, limit)
    }
}


//실행
inputDebounce.addEventListener("keyup", debounce(function() {
    dispDebounce.textContent = ++debounceCount
}, 100))

코드 출처 : http://yoonbumtae.com/?p=3584

 

• callback : 실행 대상인 콜백 함수
• limit : 얼마 후에 함수를 실행할 지 결정 (millisecond)
  • limit 이내에 함수가 반복 호출 될 경우 clearTimeout 실행 → callback이 실행되지 않음
  • 함수의 반복 호출이 멈춘 후에는 clearTimeout 실행하지 않음 → limit 밀리초 후에 callback.apply 실행
• apply메소드를 사용해서 this의 범위를 콜백함수가 실행될 때 그 컨텍스트의 this로 만듬

 

 

✅ 스로틀 (Throttle)

• 일정 시간 동안 들어오는 요청을 다 모아서, 단 한번만 수행되도록 함
  • 설정 시간을 1s로 하면, 1초 동안 최대 1번만 실행됨
  • 쉼없이 계~~속 클릭해도 1초에 1번씩만 실행이 된다
  • 무한 입력을 하면 정기적으로 실행 함
• 무한스크롤(스크롤을 내릴 때 api에서 새 글을 불러옴)에 쓰면 좋을 것 같음
  • 사용자가 스크롤 내리는 것을 멈출때 까지 기다리는 것 보다, 내리는 동안에도 쪼끔씩 새 글을 불러오는 편이 좋으므로

 

function throttle(callback, limit = 100) {
    let waiting = false
    return function() {
        if(!waiting) {
            callback.apply(this, arguments)
            waiting = true
            setTimeout(() => {
                waiting = false
            }, limit)
        }
    }
}


//실행
window.addEventListener("mousemove", throttle(() => {
    dispThrottle.textContent = ++mouseThrottleCount
}, 500))

코드 출처 : http://yoonbumtae.com/?p=3584

 

• callback : 실행 대상인 콜백 함수
• limit : 얼마 후에 함수를 실행할 지 결정 (millisecond)
• waiting : true인 경우 if문을 타지 않음
  • 최초 함수가 호출될 시, waiting은 false이므로 if문을 탐 → 이 때 콜백함수를 실행한 뒤 waiting = true로 바꿈
  • waiting이 true가 되었을 때, limit밀리초 후에 waiting = false로 변경되며, 콜백함수가 다시 실행 됨
• apply메소드를 사용해서 this의 범위를 콜백함수가 실행될 때 그 컨텍스트의 this로 만듬

 

 

👀참고 (감사합니다)

http://yoonbumtae.com/?p=3584 

자바스크립트: Debounce, Throttle 순수 자바스크립트 (Vanilla JS)로 구현 - BGSMM

 

https://velog.io/@qudgus21/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8A%A4%EC%99%80-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81

디바운스와 쓰로틀링

 

https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff

Throttle 와 Debounce 개념 정리하기

 

https://webclub.tistory.com/607

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

 

https://medium.com/@kwoncharles/debounce%EC%99%80-throttle%EC%9D%98-%EC%B0%A8%EC%9D%B4-34845fbfa1ff

Debounce와 Throttle의 차이