기본 콘텐츠로 건너뛰기

라벨이 throttle인 게시물 표시

디바운스와 쓰로틀, 무엇이 어떻게 다르고 언제 선택해야 할까

디바운스와 쓰로틀, 무엇이 어떻게 다르고 언제 선택해야 할까 빠른 답 입력이 멈춘 뒤 한 번만 실행하면 되는 작업은 디바운스가 맞습니다. 연속 이벤트 중에도 일정 주기로 반응해야 하면 쓰로틀이 더 자연스럽습니다. 무한 스크롤을 scroll 이벤트로 구현한다면 보통 쓰로틀이 유리하지만, 최신 브라우저 환경에서는 Intersection Observer도 함께 비교해야 합니다. 실무에서는 delay 값보다 leading 또는 trailing 여부, 그리고 중복 요청 방지가 더 큰 차이를 만듭니다. 목차 한눈에 비교 왜 자주 헷갈릴까 시간 흐름으로 이해하기 어떤 상황에 무엇을 고를까 코드로 보는 디바운스 코드로 보는 쓰로틀 무한 스크롤에서는 왜 쓰로틀이 먼저 떠오를까 구현할 때 놓치기 쉬운 점 한눈에 비교 실행 시점 디바운스는 마지막 이벤트 이후 조용한 시간이 지나야 실행되고, 쓰로틀은 이벤트가 계속돼도 정한 간격마다 실행 기회를 만듭니다. 중심 질문 디바운스는 "마지막 값만 필요하나"에 가깝고, 쓰로틀은 "중간 상태도 주기적으로 읽어야 하나"에 가깝습니다. 사용자 체감 디바운스는 호출 수를 많이 줄여 주지만 결과가 늦게 보일 수 있고, 쓰로틀은 반응을 이어 가기 쉽지만 호출이 완전히 사라지지는 않습니다. 부하 성격 디바운스는 네트워크 요청 압축에 유리하고, 쓰로틀은 연속 이벤트 처리의 상한을 두는 데 가깝습니다. 대표 사례 검색 자동완성, 자동 저장은 디바운스와 잘 어울리고, 스크롤 위치 계산, 드래그 좌표 반영은 쓰로틀 쪽이 더 자주 쓰입니다. 브라우저는 input , scroll , resize , mousemove 같은 이벤트를 매우 짧은 간격으로 연속 발생시킵니다. 이때 핸들러 안에서 DOM 측정, 네트워크 요청, 상태 변경을 그대로 수행하면 화면 반응이 흔들리거나 같은 요청이 과하게 반복될 수 있습니다. 디바운스와 쓰로틀은 이런 과호출을 줄이는 도구이지만, 두 기법이 답하는 질문은 조금 다릅니다. 왜...

함수 실행을 제어해보자. (feat.lodash)

 개발을 하다보면, 한번만 실행 되어야 하는 함수들도 있고, 또는 자주 실행하게 되면 성능상 문제가 되는경우가 있어서 몇 번실행 하였는지에 대해서 플래그값을 유지하면서 실행 하여야 하는 함수들이 있습니다.  그러한 경우에 사용 할 수 있는 lodash 함수가 있어서 소개시켜드리려 합니다. 1. once 사용    여러번 실행한다고 해도 한번만 실행 되게 하는 함수 입니다. 초기화용 함수를 작성할 때, 사용 하면 아주 편리하게 한번만 실행 되게 만들 수 있습니다. 앞으로 소개할 두개의 함수보다는 자주 사용하진 않습니다. 그 이유는 초기화시라고 했는데, 초기화시에 이벤트를 발생하는 라이브러리, 프레임워크가 많기 때문이죠. 2. debounce 사용  위의 함수 실행된것을 보면 console.timeLog가 함수 실행 이후 1초뒤에 실행 된 것을 볼 수 있다. 또한 callTest('third')의 경우에는 두번을 연속으로 실행 하였으나 한번만 실행 되었다. debounce호 생성된 함수는 호출 된 후에 몇ms이후 동안 함수 호출이 없다면, 해당 함수를 평가해준다.  위의 경우에는 많은 곳에서 사용 될 수 있다. 예를 들면 블로그를 작성하는 도중에 자동 저장을 시켜주기 위하여 타이밍을 잡는 경우라던지? 아니면 아이디의 중복확인을 버튼없이 적절한 타이밍에 실행 시켜주는 경우이다.  즉 이벤트가 자주 발생하지만, 마지막 단락의 순간이 중요한 타이밍이고, 실시간성이 보장되지 않아도 되는 경우이다. 웹, 앱을 사용하다 보면 위의 경우는 꽤나 자주 사용 되는 방식이라는 것을 느 낄 수 있을 것이다.  앞으로 자주 쓰게 될 것이니 있다는 것을 알고만 있자. 3. throttle 사용 throttle의 경우에는 위의 스크린샷 만으로는 특징을 확인 하기가 어려울 수 있다. throttle은 이벤트리스너의 수행의 간격을 조정한다고 보면 된다. 1 ~ 30초 동안 매 100ms마다 이벤트가 발생한다고 보자. 하지만...