디바운싱과 스로틀 모두 DOM이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 이벤트를 제어하는 방법이다.
ex) 스크롤 이벤트 => 매번 스크롤을 움직일때마다 이벤트가 발생하고 이벤트에 대한 콜백이 발생하며 이를 모두 실행하면 성능이 저하될 것이다.
트위터 웹 사이트에서 트위터를 스크롤 할 때마다 속도가 느려지고, 응답이 없는 현상 발생. => 스크롤 이벤트에 값 비싼 기능을 직접 부착하면 안됨.
이벤트 핸들러가 많은 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 기술
공통점
- 디바운스와 스로틀은 시간이 지남에 따라 함수를 몇번을 실행할지 제어한다.
- DOM 이벤트에 함수를 첨부할 때 특히 유용하다. (이벤트와 함수 실행 사이에 제어 계층을 제공하기 때문)
디바운스
이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다. => 순차적인 호출을 하나의 그룹으로 그룹화할 수 있다.
다시말해 연속으로 호출되는 함수 중에 마지막에 호출되는 함수(or 맨 처음)만 실행되도록 하는 것이다.
예시
- AJax 요청이 있는 텍스트 자동완성 양식
스로틀
이벤트를 일정한 주기마다 발생하도록 하는 기술로 마지막 함수가 호출된 이후 일정한 시간이 지나기전에 다시 호출되지 않도록 하는 것이다.
실행 횟수에 제한을 거는 것이기 떄문에 일반적으로 성능문제 때문에 많이 사용한다.
예시
- 무한 스크롤링 페이지
- 디바운싱은 스크롤이 멈췄을 때 실행을 시키기 때문에 스로틀이 더 적합하다.
차이점
가장 큰 차이점은 스로틀은 적어도 n밀리초 마다 정기적으로 기능 실행을 보장한다는 것이다. 디바운스는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시킨다. 따라서 이벤트가 계속해서 발생할 경우 실행이 되지 않을 수도 있다.
