Debounce & Throttle?
debounce와 throttle은 함수가 실행되도록 허용하는 횟수를 제어하는 방법이다. 개발자의 입장에서 항상 User Experience를 고려해야하고, 이 방법을 사용하면 이벤트 핸들러의 실행을 최적화할 수 있다. 두 가지 기술 모두 최적화에 용이하지만 각기 다른 장점을 가지고 있어 필요한 곳에 적절히 사용하는 것이 효과적이다.
Debounce
debounce는 갑작스럽게 일어난 여러 이벤트(키 입력 등)를 하나로 그룹화하여, 특정 시간이 지난 후 하나의 이벤트만 발생시키는 방법이다.
(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4rclV%2Fbtq0ApFD65V%2F34Jw0Gdel1hvvHohbxG2tk%2Fimg.png)여러 이벤트가 찰나의 순간에 여러번 발생해도 특정 시간이 지난 후 하나의 이벤트만 처리되도록 하여 불필요한 실행을 막아 해당 기능의 성능을 최적화할 수 있다.
debounce 사용의 대표적인 예시) 버튼 중복 클릭 방지
Throttle
throttle은 x밀리초마다 일정한 실행을 보장하는 방법이다. 쉽게 말해 일정한 주기마다 이벤트를 발생시키는 것이다. 가령, 어떤 CSS 애니메이션을 트리거하기 위해 200ms마다 스크롤 위치를 확인하는 것이 throttle 방식을 사용한 이벤트 핸들러의 최적화이다.
(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkUExC%2Fbtq0zZf9s1c%2FQ559Kyka5nQc0dZL8OL1W1%2Fimg.png)throttle 사용의 대표적인 예시) 스크롤 이벤트
Throttle 사용하기
실제 구현 코드 - progress bar 구현하기
-
throttle을 사용하기 위해서 실행할callback과 함수가 실행되고 나서 다시 실행될 수 있는 시간 간격인time을 인자로 갖는 함수를 생성한다. -
만약
timerID가 존재하면throttle함수는 아무 동작도 하지 않고 종료한다. 여기서timerID는setTimeout이 작동 중인 상태를 나타낸다. 이 조건에 의해 지정한 시간(time) 동안callback은 한 번만 실행된다. -
setTimeout을 사용하여 지정한 시간(time)이 지나면callback함수가 호출된다.
callback이 실행되면timerID는 다시undefined로 설정(초기화)된다. 이렇게 해야 이후에 다시throttle함수가 호출될 때callback이 실행될 수 있다.
throttle 함수 로직 정리
처음 throttle 함수가 호출되면 callback이 지연 시간 이후에 실행되고, timerID가 설정되어 그동안 추가적인 호출이 무시된다.
지정된 시간(time)이 지나면 timerID가 undefined로 설정되어 이후에 callback이 다시 실행될 수 있게 된다.
📌 throttle 함수를 통해 스크롤 이벤트처럼 자주 발생하는 이벤트에서 불필요한 호출을 줄이고, 성능을 개선할 수 있다.
https://css-tricks.com/debouncing-throttling-explained-examples/_
