쓰로틀링(Throttling)과 디바운싱(Debouncing)

쓰로틀링과 디바운싱은 성능상의 이유로 DOM 이벤트를 실행되는 javascript의 양을 제한하는 방법이다.

예를들어 지금 개발자 툴을 열고 콘솔탭에서 아래 코드를 입력해보자.

const event = () => {
    console.log("test");
}
window.addEventListener('scroll', event);

그리고 이 페이지 스크롤을 몇 번 해보자. "test"라는 문구가 최소 몇십번은 호출되어 있을 것이다. 콜백 함수가 조금이라도 복잡한 함수로 되어있다면 홈페이지의 성능이 저하된다.

쉽게 말해서 쓰로틀링과 디바운싱은 console창에 뜨는 "test"라는 텍스트가 출력되는 숫자를 줄여주는 방법이라고 생각하면 된다.

memo. 위 이벤트를 지우고 싶다면? 아래 코드를 콘솔창에 입력하면 된다.

window.removeEventListener("scroll", event);

쓰로틀링(Throttling)

• throttle
  1. 동사 : 목을 조르다, 목을 졸라 죽이다.
  2. 명사 : (자동차 등의 연로)조절판

쓰로틀링은 함수 호출을 시간 단위로 제한하는 방법이다. 처음 들어줬던 스크롤 예제에 쓰로틀링을 적용하면 스크로를 계속 하는 동안 일정한 시간마다 "test"라는 텍스트가 출력되도록 만들 수 있다. 기존에는 1초만 스크롤 했을 뿐인데 "test"가 100번 호출되었다면, 0.1초당 1번으로 줄일 수 있다는 의미다. ✨

디바운싱(Debouncing)

• de + bounce (공학용어)
  • de-
    • '~의 반대, 반-' 의 뜻
  • bounce
    • 동사 : 튀다. 튀기다
    • 명사 : (공 같은 게) 튐, 튀어오름

디바운싱은 함수의 호출이 완전히 멈춘 뒤 일정 시간이 지난 뒤에 실행시키는 방법이다. 처음 들어줬던 스크롤 예제에 디바운싱을 적용한다면 스크롤을 하다가 스크롤을 완전히 멈춘 뒤에야 "test"가 한 번 출력된다는 의미다.

단순 예제

눈에 보이는 예제로 쓰로틀링과 디바운싱을 확인해보자.

쓰로틀링 코드

let timer;
const throttle = (callback, delay) => {
  if(!timer) {
    timer = setTimeout(()=>{
      timer = null;
      callback();
    }, delay);
  }
}

• callback : 특정 트리거마다 동작하는 함수
• delay : 동작이 지연될 시간

1. 특정 함수가 실행되려고 할 때, timer가 존재하는지 확인한다. (바로 실행되진 않음)
2. timer가 없다면 ?
   1. callback 함수를 예약한다.
   2. delay시간 후 timer는 없어지고, 예약했던 함수를 실행한다.
3. 그러므로 delay시간동안은 timer가 있으므로 아무리 많이 호출해도 callback함수는 특정 시간마다 한 번 실행된다.
4. delay만큼 시간이 지났다면 timer가 사라졌으므로 그 다음 동작이 setTimeout에 예약된다.

디바운싱 코드

let timer;
const debounce = (callback, delay) => {
  if(timer){
    clearTimeout(timer);
  }
  timer = setTimeout(callback, delay);
}

• callback : 특정 트리거마다 동작하는 함수
• delay : 동작이 지연될 시간

1. 특정 함수가 실행되려고 할 때, timer가 존재하는지 확인한다. (바로 실행되진 않음)
2. timer가 있다면?
   • timer 예약을 취소한다.
3. 그리고 timer가 있든 없든 callback함수가 delay시간 뒤 실행되도록 예약한다.
4. delay시간만큼 흐르기 전에, 다시 해당 callback함수를 실행하고자 하면 이전 예약을 취소하고 다시 예약한다.
   • 자꾸 예약을 취소하면 최종 실행되는 시간이 계속 지연된다.
5. delay시간 안에 다시 함수를 실행시키지 않으면 원래 하려던 동작을 하게된다.

적용 예시

툭하면 끌려나오는 토이 프로젝트 화면

우측의 form에 텍스트를 입력하면 바로 오른쪽에 같은 텍스트가 나타나도록 만들었다. 텍스트를 완전히 작성하고 난 뒤에 좌측 이미지를 만들고 싶다면 디바운싱을, 사용자가 타자를 치는 중간에도 좌측 이미지를 보여주고 싶다면 쓰로틀링을 사용하면 되겠다.

 

그리고 이건, 성능 개선을 위한 것은 아니지만 디바운싱과 같은 원리로 효과를 적용해서 만든 것으로 기억한다. (스크롤이 움직이기 시작하면 섹션마다 scroll되고 있다는 특정 class를 붙이고 스크롤이 완전히 멈춰야 class를 다시 제거하는 방식을 사용했다.)

참고 사이트

• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa