Throttle, Debounce
쓰로틀링과 디바운드
Throttle, Debounce?
공통 키워드로는 이벤트 연속성
특정 함수를 호출할 시, 이벤트 리스너와 관련된(예 : scroll, 인풋 입력) 함수를 호출할 시 해당 이벤트들이 너무 연속적으로 수행될 때가 있는데 debounce와 throttle은 이를 방지하기 위한 기술.
Throttle
이벤트를 호출한 후, 실행문장을 한 번 실행하고, 설정한 시간만큼은 재호출을 해도 응답하지 않습니다.
예 : 버튼 더블클릭방지
Debounce
이벤트를 호출한 후, 설정한 시간이 지나도록 재호출이 없어야 해당 실행 문장을 실행.
인풋에 키를 입력하면 값이 출력되는 이벤트를 호출한다고 가정했을때, 마지막에 입력했을 때를 기점으로 설정한 시간 만큼 재호출이 없어야 실행문장이 실행된다.
예 : 인풋입력 값에 따른 검색결과 출력이 있을때
참고
https://webclub.tistory.com/607
https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff
Last updated