debounce & throttle 이론 완벽 설명 (쉽게)

• Debounce와 Throttle 모두 함수의 실행을 제한하는 목적을 두고 있다.
• Throttle은 함수 실행 후 특정 기간동안의 추가 실행을 모두 취소한다.
• Debounce는 특정 기간안의 함수 실행을 모두 취소하고 마지막에만 실행한다.
• Throttle
  • Throttle은 함수 실행 후 특정 기간동안의 추가 실행을 모두 취소한다.
    • 예를 들어 상품을 구매하는 버튼이벤트는 Throttle로 해야한다.
    • 이유는 상품구매 이벤트를 실행하면 여러 검증로직이 실행이 되어서 5초가 걸린다고 보면 그 5초동안 해당 이벤트는 또 실행이 되면 안된다 (구매 검증이 꼬일수 있어서)
    • 리스트 더 불러오기도 throttle를 적용하면 좋습니다.

1. 처음 파랑색 1번 이벤트를 발생 하였고 정상적으로 완료되었다
2. 다시 파랑1번 이벤트가 실행되었고 이후 주황 이벤트 1,2번 콜이 들어왔지만 파랑1번이 실행되고 있기에 무시 되었다
3. 모두 끝나고 초록 2번이 실행되었고 이후 바로 초록 1번이 콜이 되었지만 무시되었다.

• Debounce
  • Debounce는 특정 기간안의 함수 실행을 모두 취소하고 마지막에만 실행한다.
    • 이벤트가 불리오고 있는데 정해진 시간안에 또다시 이벤트가 불리우면 이전에 불려진 이벤트를 취소하고 새로 불려진 이벤트를 처리한다.
    • 쇼핑몰 장바구니 개수 조정 버튼, 여러번 눌러도되는 버튼에 적용

 

1. 파랑색 1번은 이벤트를 실행하면 특정시간뒤에 해당 이벤트가 실행되고 끝난다.
2. 초록색 2번 이벤트가 실행되었지만 특정시간안에 주황1번이벤트가 들어왔도 이어서 파랑1번이 들어왔다 다시 주황2번이 들어와서 이전에 콜되었던 이벤트들은 모두 무시가 되었고 주황 2번이 실행이 되었다
3. debounce의 특징은 이벤트가 콜되면 특정 시간뒤에 해당 이벤트 로직이 실행이 됩니다.

이러한 처리는 서버의 부하를 줄여주고 프로그램의 완성도와 안정성을 많이 올려줍니다.

적절한곳에 꼭 넣읍시다.