JavaScript - debounce & Throttle

✅ Debounce

• 짧은 예시와 함께 설명하겠습니다.

네이버, 구글 등 많은 포털 사이트 검색창에 검색어를 치면 아래에 연관 검색어가 함께 나옵니다.
연관 검색어를 즉시 보여주려면 input 이벤트가 항상 대기하고 있어야 합니다.
여기서 문제점은 한글자를 칠 때 마다 ajax 에 요청하게 되는데, 그 중에는 분명 제대로 된 검색 결과가 나오지 않는 검색어도 있을겁니다.
이러한 상황은 결국 유료 API를 사용하고 있는 사이트라면 엄청난 낭비를 불러오겠죠.
(디바운스는 결국 비용적인 문제와 관련 되어 있음)

이러한 상황을 방지하기 위해 구현해야 하는 방법에 대해서 생각 해봅시다.
1. 입력이 끝난 후 검색어가 뜨게 하기
2. 입력이 끝나는 기준 정하기

let timer;
document.querySelector('#input').addEventListener('input', function(e) {
  clearTimeout(timer);
	}
	timer = setTimeout(function() {
		console.log('ajax 요청', e.target.value);
	}, 200);
});

위에서 생각한 방식대로 구현하였기 때문에, 더이상 검색 글자수에 맞춰 여러번 호출되지 않게 됩니다.
이것을 바로 디바운스 라고 합니다. (한글은 두 번 호출 될 수 있음)

✅ Throttle

• 요즘 페이지들은 무한 스크롤을 많이 사용합니다.
  하지만 스크롤은 올리거나 내리거나 할 때, scroll 이벤트가 매우 많이 발생합니다.
  이러할 경우에 Throttle을 걸어주게 됩니다.
• 사용법과 실행 방법은 디바운스랑 매우 비슷합니다. 코드 참고 사이트