[TIL] 디바운싱과 쓰로틀링

디바운싱

• 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 특정시간 지난 후 하나의 이벤트만 발생하도록 하는 기술
• 웹에서 주로 ajax검색에 자주 쓰인다.
• 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용
  • leading edge: 처음에 실행한 함수를 실행하고 그 뒤 이벤트 무시
  • trailing edge : 마지막에 실행한 함수를 실행하고 그 전의 이벤트 무시

 

쓰로틀링

• 마지막 함수가 호출되고 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• 성능 개선을 위해 사용(무한 스크롤)
• 이벤트를 일정주기마다 발생하도록 하는 기술

 

디바운싱 vs 쓰로틀링

- 디바운싱 : 스크롤이 내리다가 스크롤을 멈추고 정해진 시간 후 이벤트 발생.

- 쓰로틀링 : 이벤트 하나 발생하고 특정 시간동안 이벤트가 발생하지 않고, 그 시간이 지나면 다시 이벤트가 발생.

 

디바운싱 Leading Edge vs Throttling

- 디바운싱 Leading Edge : 설정한 타이머 시간 안에 요청이 지속적으로 들어올 경우 모든 요청 무시

- Throttling : 지속적으로 요청이 들어올 경우 정해진 타이머 시간이 지나면 요청 허용

 

 

둘을 이용할 땐 로대쉬를 사용하자.

 

참고
10분 테코톡 : https://youtu.be/By49qqkzmzA
제로초 블로그 : https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa