Debounce & Throttle

이벤트나 함수가 실행되는 빈도를 줄여 서버에서 과부하 걸리지 않게 하기 위함

1. Debounce :

여러 번 발생하는 이벤트에서 가장 마지막 이벤트 만을 실행 되도록 만드는 것

예시) 프론트쪽에서 검색할 때 ex) 0.5초 

0.5초 안에 이벤트가 일어났으면 초기화 계속하다가 0.5초가 지나도 아무 이벤트 일어나지 않으면 서버에 콜(submit) 날리는 것 

 

2. Throttle:

개념 : 여러 번 발생하는 이벤트를 일정시간 동안 한 번만 실행 되도록 만드는 것. 일정 시간 동안 만 기다리고,이벤트를 실행시킨 후 재차 기다림.

 

ex) 스크롤사용할 때 EventListener 폭주 - 브라우저 죽을 수 있다. 

 0.5초 동안 EventListener 한 번만 실행하겠다고 하는 것 

 

-> Debounce 는 입력이 끝날때까지 무한적으로 기다리지만, Throttle 는 입력이 시작되면, 일정 주기로 계속 실행한다.

 

 

Stack, EventLoop, Queue

자바스크립트는 single thread 언어이다.

자바스크립트는 위에서 아래로 순차적으로 위에가 처리된 후에야 아래로 넘어가는 게 아니고, 대기실로 일단 보내는 코드들이 있다. 예를 들어) setTimeout, Ajax 요청, eventListener 등 

Stack : 내가 짠 코드를 실행해 주는 곳이며 대기 끝난 코드들이 queue에 있다가 Stack 으로 하나씩 올려 보내준다.(Stack 이 비어있을 때만 하나씩 올려보낸다.) setTimeout의 대기시간이 0초여도 대기실로 갔다가 다음에 실행된다. 

--> 자바스크립트는 동기적으로 원래 처리된다. 한 번에 한 줄 순서대로.. 그러나, setTimeout, eventListener, ajax함수 쓸 경우 비 동기적인 처리도 가능하게 된다. 

확실히 알기 (Promise, Stack, Queue, EventLoop, V8 engine)

https://www.youtube.com/watch?v=_wpXOxh0XVk 

 

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

Throttle 와 Debounce 개념 정리하기