Debounce, Throttle

Rubi·2023년 9월 14일
0

Debounce

Debounce
잠깐 기다렸다가 마지막에 한 번만 실행함
예를 들어 사용자가 검색창에 연속으로 글자를 입력하면 검색 api 호출이 너무 많아져서 불필요한 부하를 줄 수 있음
debunce를 사용하면 사용자가 글자를 입력하는 동안 연속된 api 호출을 막고 사용자가 특정 시간 동안 (예: 200ms) 입력을 중지할 때만 마지막으로 입력한 검색어로 검색 api를 호출함

Throttle
정해진 시간 간격마다 한 번씩 실행함
예를 들어 웹 페이지를 스크롤 할 때 마다 화면에 새로운 정보를 로딩해야하는 경우가 있다
사용자가 빠르게 스크롤을 하면 너무 많은 호출이 발생하게 된다
throttle을 사용하면 일정 시간 간격(예:200ms)으로만 해당 함수(api 호출 등)를 실행하게 된다.
사용자가 빠르게 스크롤을 해도 설정된 시간 간격을 유지하며 함수를 호출하게 되므로 불필요한 호출을 줄일 수 있다

profile
Front-end developer

0개의 댓글