디바운스와 쓰로틀

디바운스 (Debounce)

한번 요청된 것으로 기준으로 wait time이 지나지 않으면 다시 요청을 보내지 않는다. 만약 이벤트가 계속 발생하면 타이머가 계속 초기화된다.

Leading edge에 실행될지 trailing edge에 실행될지 선택할 수 있다.

주로 ajax 검색에 쓰인다.

쓰로틀 (Throttle)

한번 함수가 실행된 후에 wait time이 지난 이후에만 다시 함수가 실행된다. 함수의 실행 시간과 관련 있다.

주로 스크롤을 올리거나 내릴 때 사용된다.

활용

검색 자동 완성 기능

매번 Request를 보내는 것이 아니라 디바운스나 쓰로틀을 사용하여 request를 보내는 빈도를 조절할 수 있다.

• 디바운스 : 타이핑을 하는 동안에는 요청을 보내지 않다가 타이핑을 멈추면 요청을 보낸다.
• 쓰로틀 : 일정 기간 동안 타이핑된 것에 대해 요청을 보내는 것을 반복한다.