실시간 검색 자동완성 만드는데 키 입력할 때마다 API가 호출돼서 요청이 미친듯이 나가더라고요. 선배가 debounce 걸라고 했는데, 찾아보니까 옆에 throttle이라는 것도 같이 나와서 둘 차이가 헷갈립니다.
대충 이렇게 이해했는데 맞나요?
debounce : 이벤트가 멈추고 delay 시간이 지나야 딱 한 번 실행. 중간에 또 발생하면 타이머 리셋. (검색 입력, 자동 저장)
throttle : 아무리 많이 발생해도 정해진 interval마다 최대 한 번만 실행. (스크롤, 리사이즈)
제가 짜본 디바운스는 이런 모양이에요.
function debounce(fn, delay) {
let t;
return function (...args) {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), delay);
};
}
이렇게 하니까 타이핑 멈춘 뒤에만 호출돼서 검색은 딱 원하던 대로 됐어요. 근데 이걸 만약 무한 스크롤에 그대로 갖다 쓰면 사용자가 계속 스크롤하는 동안엔 한 번도 실행이 안 될 것 같은데, 이럴 때가 throttle 써야 하는 상황인 거 맞나요? 어떤 상황에 뭘 골라야 하는지 판단 기준이 아직 흐릿합니다. throttle 예시랑 같이 정리해주시면 큰 도움 되겠어요.