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

✅ 공통점

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

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

● 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))

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