Debouncing && Throttling
Debouncing!! 이친구는 자바스크립트의 개념이라기 보다는 프로그래밍 기법중 하나입니다. 둘 다 일반적으로 CPU에게?? 무리를 주지 않기 위해 사용되곤 합니다! Throttling 이친구도 똑같아요!! 쉽게 최적화를 위해 사용되곤 합니다.!
디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다.
쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉, delay 시간동안 호출된 함수는 무시하는 케이스 이다.
예시를 보러 가요!
결국 재가 검색하고싶은 단어는 가장 마지막에 있는 친구 입니다!!
자바스크립트는 글자하나하나가 바뀔때마다 새로 그려지는 친구입니다.
그러면 디바이스에 무리가 많이 가다 보니 디바운싱을 사용해서 중간과정을 띄어 넘고 마지막만 실행되게 해주는게 디바운싱입니다!! 사용해보죠!
debounce는 우리가 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킵니다.
Throttling 200ms동안 작동시키고, 만약 쓰로틀러가 이벤트를 조이고 있는 경우, 해당 이벤트는 무시됩니다. 결과적으로 200ms 동안 최대 1번의 이벤트만이 발생이 가능하게 됩니다!
즉, 우리가 무언가를 계속 입력하고 있으면 함수를 실행시키지 않고, 우리가 입력을 끝내고 가만히 있으면 그때 함수 결과를 보여줍니다.
