이벤트 핸들러가 많은 연산(무거운 계산 및 기타 DOM 조작)을 수행(이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 경우 제약을 걸어 제어하여 이벤트를 발생시키는 기술이다.
여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념
일정한 주기마다 발생하도록 하는 기술
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
잦은 이벤트 발생을 막아 성능상의 유리함을 가져 올 수 있다.
스크롤 이벤트에 대한 콜백이 발생한다.
이벤트가 과도하게 발생하면 이벤트 핸들러가 무거운 계산 및 기타 DOM 조작과 같은 작업을 많이 수행하는 경우 선능 문제가 발생하고 사용자 경험까지 떨어뜨리게 된다.
여러번 발생하는 이벤트에서, 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 한다.
연이은 호출 함수들 중 가장 마지막(또는 제일 처음) 이벤트 만을 실행 되도록 만드는 개념
이벤트를 언제 발생시킬지 시점의 차이다.
Throttle은 x밀리 초마다 정기적으로 기능 실행을 보장하고
Debounce는 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않을 때 딱 한번만 마지막 이벤트를 발생시킨다.
유저가 스크롤을 하면서 끝에 다다르면 API요청을 통해 데이터를 불러와 추가 해야한다.
자 그럼 여기서 디바운싱은 스크롤이 멈출 때만 실행이 되기 때문에 사용자가 푸터에 도달하기 전에 요청이 필요하다. Throttle을 통해 사용자의 위치가 푸터에서 얼마나 떨어져 있는지 확인 할 수 있기 때문에 무한스크롤에서는 Throttle을 사용하는게 더 유리하다.
출처: https://webclub.tistory.com/607 [Web Club]
출처: 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