쓰로틀링(throttling) 디바운싱(debouncing)

쓰로틀링:

• 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• 실행 횟수에 제한 == 함수 호출을 시간 단위로 제한
• 스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생하므 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 건다.

let timer = null;
body.onscroll = (event) => {
    if(timer) {  //이전의 이벤트가 존재할 경우, 이전의 이벤트가 끝난 이후 실행
      retrun;
    }
    timer = setTimeout(() => {
        	timer = null;
      //스크롤 이벤트 API 호출
        }, 200);   
}

디바운싱:

• 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
• 일정 시간이 지난 뒤에 실행 == 함수의 호출이 완전히 멈춘 뒤 실행
• 새로운 이벤트가 호출 되었을 때, timer가 동작 중이라면 기존 timer를 제거하고 새롭게 추가하는 방식

let timer = null;
inputText.onkeydonw = (event) => {
	if(timer) //이전에 이벤트가 발생했다면
    	clearTimeout(timer); //이전 이벤트를 지운다.(클로저 개념)
   	if(event.target.value){
    	timer = setTimeout(() => {
        //추천 검색어 API 호출
        }, 200);
    }
}

쓰로틀링, 디바운싱의 공통점

• 이벤트 핸들러가 빈번하게 호출되는 상황에서는 불필요한 리소스 소모를 줄일 수 있습니다.
• 일정 시간 동안 중복 호출을 방지

TIP
디바운싱은 설정한 시간 안에 이벤트가 계속 발생한다면 콜백 함수 호출은 무기한 기다리게 됨.
검색 기능을 쓰로틀링으로 대체 가능

참고 레퍼런스1
참고 레퍼런스2
참고 레퍼런스3