[항해 99 주특기] Throttiling && Debouncing && Lodash

스로틀링

스로틀링이란 어떠한 이벤트를 연속적으로 눌렀을 때 그 이벤트의 결과로 인해 리랜더링이 모두 일어나게 된다면 부하가 굉장히 높아지게 되는데 이러한 과부화를 막기 위해서 사용할 수 있는 기법으로써

가장 쉬운 예로 좋아요 버튼을 엄청나게 누르는 케이스가 있을텐데 그때마다 서버에 데이터를 갱신해달라는 요청을 보낸다면 많은 부하가 생길 것 이러한 상황에서 쓸 수 있는 기법이다.

즉 과도한 이벤트 핸들러 호출을 방지하는 기법이다.

실제로 사용해보면서 이해하는 것이 가장 쉽기 때문에 실습을 병행하면서 이해를 해보았다.

setTimeout을 통해서 원리를 이해해보자 (JS문법에서만 쓰이는 것이 아니기 때문에 잘 알아두면 좋다) 

 

아래 3가지는 스로틀링의 예시이다.

개념적으로는 3가지 기법이 있다 시작할 때,  끝날 때, 시작하고 끝날때 함수가 실행되는 것이다

결국 딜레이되는 시간을 기준으로 그 시간 안에 입력 된 이벤트는 모두 하나로 취급하는 것이다. 스로틀링은 디바운싱과 달리 정해진 딜레이마다 이벤트가 작동을 해서 계속해서 누르면 정해진 시간마다 출력되는 것이 디바운싱과는 가장 큰 차이점이다

 

디바운싱

스위치를 누르면 깜빡이다가 켜지는 전등같은 것

이벤트가 바운싱이되면서 나중에 완료가 되는 현상이 있다 그런것들을 안하기 위해서 처리하는 기법이 디바운싱이다

짧은 시간연속해서 이벤트가 발생하면 이벤트핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간이 경과된후에 함수를 호출한다 리사이징이벤트에서 실행한다. 줄이고 늘리는 이벤트에 다 발생시키면 부하가 엄청나니깐 리사이징 완료되고 일정시간후에 함수를 호출하면 부하가 적다

스로틀링과 가장 큰 차이점은 계속누르면 계속 시간이 초기화되서 마지막에 누른시점을 기점으로 딜레이가 지난 후 출력되는 것이 가장 큰 차이점이다.