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

디바운싱(debouncing)

새로운 이벤트가 호출 되었을 때, timer가 동작 중이라면 제거하고 새롭게 추가하는 방식이다.

검색어를 검색 창에 입력할 때, 실시간으로 결과가 호출되게 하는 경우 모든 입력이 끝났을 경우에만 API를 호출하는 스킬이다.

네트워크 비용을 크게 절약하고 효율적으로 프로그램이 동작할 수 있다.

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

 

 

쓰로틀링(throttling)

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

스크롤 시, 요청 버튼을 클릭한 경우 주로 사용하며 중복 요청이 발생하지 않도록 한다.

let timer = null;
body.onscroll = (event) => {
	if(!timer){
    	timer = setTimeout(() => {
        	timer = null;
            //data load
        }, 200);
    }
}