Debounce && Throttle
목차
- 타이머에 대해
- 디바운스와 스크롤에 대해
- scroll을 이용한 디바운스와 스로틀 비교
출처
모던 자바스크립트 41장
디바운스와 스로틀
- https://webclub.tistory.com/607#:~:text=%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC%20%EC%8A%A4%EB%A1%9C%ED%8B%80%EC%9D%98,%EB%A5%BC%20%EB%B0%9C%EC%83%9D%EC%8B%9C%ED%82%A4%EB%8A%94%20%EA%B8%B0%EB%B2%95%EC%9E%85%EB%8B%88%EB%8B%A4.
- https://dev-note-97.tistory.com/278
1. 타이머에 대해
자바 스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout
, setInterval
그리고 이를 초기화 할 수 있는 clearTimeout
, clearInterval
을 제공한다.
이 타이머들은 자바스크립트에서 제공하는 빌트인 함수가 아닌 전역 객체의 메서드로서 호스트 객체
이다.
자바스크립트 엔진은 싱글 스레드 엔진이기에 타이머 함수의 경우 비동기
로 동작하게 된다.
setTimeout
const timeoutId = setTimeout(func, [delay, param1, param2, ...]
func
: setTimeout의 지연시간이 끝나고 실행되는 함수이다.
delay
: 딜레이 되는 시간 설정
params1, params2 ...
: 호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세번째 이후의 인수로 전달할 수 있다.
2. 디바운스(debounce)와 스로틀(throttle)에 대해
디바운스와 스로틀의 필요성
우리는 scroll, resize, input, mousemove와 같은 이벤트의 경우 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 헨들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.
이때 , 디바운스와 스로틀은 짧은 시간 간경으로 연속해서 발생하는 이벤트를 그룹화
해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.
디바운스란?
짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출시키지 않다고
일정 시간이 경과한 후에
이벤트 핸들러가 한번만 호출하도록 한다.
스로틀이란?
짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. 즉, 일정 시간 단위로 이벤트 핸들러가 호출되도록
호출 주기
를 만든다.
3. scroll을 이용한 디바운스와 스로틀 비교
예제 코드
https://codesandbox.io/s/cool-brahmagupta-9dy5j?file=/src/index.js
실행화면 캡처
-
일반적인 스크롤
을 했을 때 엄청나게 많은 이벤트 횟수가 발생하는 것을 알 수 있다. -
스로틀 이벤트
를 구현했을 경우 내가 지정한 딜레이만큼을 한 이벤트로 묶어서 이벤트가 발생하는 것을 알 수 있었다. -
디바운스 이벤트
를 구현했을 경우 내가 스크롤 이벤트를 다 끝낸 후에 이벤트가 발생한 것으로 이벤트가 발생하는 것을 알 수 있었다.
실제 페이스북이나 인스타그램에서는 디바운스로 스크롤을 구현하는 것으로 알고 있다.
Author And Source
이 문제에 관하여(Debounce && Throttle), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@turtle601/Debounce-Throttle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)