[JavaScript] 쓰로틀링, 디바운싱

쓰로틀링과 디바운싱 모두 함수 실행 요청이 연달아 들어오는 경우 과한 실행을 막기 위해 처리하는 로직이다. 

 

쓰로틀링 throttling

일정한 시간마다, 또는 앞선 실행이 끝난 경우에만 함수가 실행되도록 하는 것.

 

ex) 스크롤

스크롤을 내릴 때 어떤 함수가 실행되는 코드를 짜는 경우 함수가 수십번 실행될 수 있음

-> 일정한 시간마다 함수를 실행케 하면 요청을 줄일 수 있음

 

디바운싱 debouncing 

 

함수 실행 요청 이후 일정 시간이 지나야 함수를 실행, 하지만 요청이 들어올 때 마다 계속 시간을 리셋해 결국 마지막 한 번만 함수가 실행되도록 함.

 

ex) 검색

키워드 입력 후 엔터 없이도 검색결과를 보여주거나 할 때 키보드를 여러번 누르면 누를 때 마다 서버로 ajax요청 실행.

-> n밀리초 후 서버요청 실행하도록 코드 작성, 키보드를 입력 할 때 마다 시간을 0으로 되돌림. 마지막 키보드 입력 후 n밀리초가 지나면 함수가 실행됨. 

 

 

---

참고자료

• https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa#google_vignette
• https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-e02f6bb14627