Graceful Light

Throttle, Debounce Pattern

2016-12-22


javascript throttle 패턴과 debounce 패턴에 대해 알아보자.

Throttle

매 ms마다 한 번만 호출된다.
mousemove, scroll 같은 이벤트로 호출되는 함수는 이벤트 발생시 무한정 호출되어 성능 저하를 가지고 오는데, 이를 방지할 수 있다.

모바일에서 스크롤링 더보기에 사용할 수 있다.

소스

Debounce

마지막 호출로부터 ms후에 함수를 한번 호출한다.
지연된 호출을 할 수 있게 해주는데, 호출이 반복되는 동안은 실행을 방지하고, 호출이 멈춘 뒤 지정한 ms 후에 함수를 실행해 성능 저하를 막을 수 있다.

검색 자동완성 기능에 적합하다.

소스

여담

즐겨 사용하는 sublime text package인 javascript patterns에서 참조했다.

lodash를 사용한다면 debounce, throttle로 더 쉽게 사용할 수 있다.

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요