티스토리 뷰
Debounce 정의
- 불필요한 CPU 사이클, api 호출을 피하기 위해 특정 시간까지 함수의 실행을 지연해서 함수 호출을 제어하는 프로그래밍 기술
- 연속적인 이벤트 호출을 하나로 그룹화하여 함수 호출을 지정 시간까지 흐를 때까지 지연시키는 기능
- 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 경우에 한 번만 이벤트를 발생시키는 기법
Debounce를 사용하는 경우
- 보통 유저가 발생시키는 이벤트 중에 최종값에 관심이 있는 경우에 사용된다.
- 텍스트 필드 자동 재생, 화면 리사이즈, 버튼 더블 클릭 제거, 인풋 입력창
Throttle 정의
- 일정한 주기마다 이벤트가 발생하도록 하는 기술
- 특정 시간마다 함수가 주기적으로 실행하는 걸 보장한다.
- 함수가 호출된 이후 일정한 시간이 지나기 전에는 함수를 다시 호출되지 않도록 한다.
Throttle를 사용하는 경우
- 무한 스크롤 페이지에서 미리 다음 컨텐츠를 가져오기 위해 일정한 주기마다 이벤트를 발생시키는 데 사용된다.
- debounce는 스크롤이 멈춰서 특정 시간동안 이벤트가 발생하지 않았을 경우만 이벤트를 발생시키기 때문에 미리 다음 콘텐츠를 가져오는 게 불가능하다.
https://lodash.com/docs/4.17.15#debounce
https://www.mrlatte.net/code/2020/12/15/lodash-debounce
https://webclub.tistory.com/607
https://blog.bitsrc.io/what-is-debounce-in-javascript-a2b8e6157a5a
댓글