스토틀링과 디바운싱의 의미가 무엇일까?
한마디로 프론트엔드 측면에서 정의하자면..
DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면 즉 이벤트를 제어 또는 제어 하는 방법이다.
예를들어서 웹/앱 사용자가 스크롤을 한다고 가정을 해보자. 브라우저는 스크롤 하는 행위도 하나의 이벤트로 정의를 해서 스크롤을 할 때 마다 수많은 이벤트가 발행한다.
즉 이러한 스크롤 같은 행위로 인해 스크롤 이벤트에 대한 콜백이 수도 없이 발생 할 것이고, 콜백이 이벤트를 수행하기 위한 행위들은 엄청 큰 리소스를 잡아먹게 될것이다.
다시 말해서, 과도한 이벤트 횟수의 실행으로 이벤트 핸들러가 무거운 계산 및 DOM 의 조작을 수도 없이 수행함으로 사용자에게 안좋은 경험을 유발 시킬 수 있다.
이러한 이유로 스로틀링과 디바운싱 방법이 나온 것 이다.
[Throttling]
스로틀링은 사전적인 의미로는 목을 조르다,조절하다 라는 뜻을 가지고 있다.
컴퓨터 관점에서 생각을 해보면 요청, 혹은 이벤트가 의도한 바 보다 너무 많이 발생 할 때, 일정 delay를 주고 delay 하는 동안에는 이벤트 자체를 막음으로써 이벤트를 막은 그 시점에서 발생한 이벤트,요청,함수 등은 전부 무시가 된다.
[Debouncing]
디바운싱은 계속 호출되는 함수들 중에서 제일 마지막에 실행된 함수만 호출 되게 하는 것이다.
이말은 즉슨 가장 최근으로 실행된 이벤트를 실행되게 하는 것이다.
이미 정해둔 delay 시간보다 짧은 시간 내에 이벤트가 실행되면 실행 되지 않고 delay 시간이 지나면 실행이 되는 것이다.
즉 스크롤을 할때 짧은 시간에 많은 이벤트들이 발생하는데 일정 delay 시간안에 스크롤 이벤트가 다시 발생하면 이벤트가 실행되지 않고, 정해둔 delay 시간이 자나면 실행이 되는것이다.
