목차

1. 타이머에 대해
2. 디바운스와 스크롤에 대해
3. 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

실행화면 캡처

1. 일반적인 스크롤을 했을 때 엄청나게 많은 이벤트 횟수가 발생하는 것을 알 수 있다.

2. 스로틀 이벤트를 구현했을 경우 내가 지정한 딜레이만큼을 한 이벤트로 묶어서 이벤트가 발생하는 것을 알 수 있었다.

3. 디바운스 이벤트를 구현했을 경우 내가 스크롤 이벤트를 다 끝낸 후에 이벤트가 발생한 것으로 이벤트가 발생하는 것을 알 수 있었다.

실제 페이스북이나 인스타그램에서는 디바운스로 스크롤을 구현하는 것으로 알고 있다.