Throttle, Debounce

Event Handler가 많은 연산을 수행할 때, 제약을 걸어 제어할 수 있는 수준으로 Event를 발생시킬 수 있다.

DOM API 중, onmousemove, onmouseover, onscroll 등 혹은 input event의 change, keyup 등을 사용할 때에 자칫하면 정말 많은 이벤트가 호출이 될 수 있다. 이런 이벤트들을 많이 사용하다보면 웹 사이트의 성능이 떨어질 수밖에 없다. 그렇기 때문에 우리는 Throttle과 Debounce를 사용한다.

Throttle은 언제 쓸까?

When we want to limit the amount a function is invoked.

로또라면, 공이 매 5초마다 나와야 할 때, 

술집에 가서 술을 마시는데 45분마다 1잔씩 시켜야 하는 룰이 있을 때 등

어떤 행위를 하는데 앞선 행위가 끝나고 나서 행위를 실행시키고 싶을 때! Throttle을 사용한다.

이벤트를 일정한 주기(5초, 45분)마다 발생할 수 있도록 하는 기술이다.

마지막 함수가 호출된 후, 일정 시간이 지나기 전에 다시 호출되지 않도록 한다.

 

내가 유튜브 미션에서 사용했던 Throttle은 Snack Bar에 대한 것이었다.

하나의 Snack Bar가 3초동안 보여지는 동안 유저의 다른 행위로 인해 또다른 Snack Bar가 나타나야 했을 때, 이를 막기 위해 사용했다.

만약 3초 내에 유저가 다른 행위를 해서 Snack Bar가 보여져야 한다면, 이건 앞선 Snack Bar가 실행되고 있기 때문에 무시된다.

class SnackBarView {
  #throttle;

  constructor() {
    this.#throttle = null;
  }

  showSnackBar = text => {
    const $snackBar = document.querySelector(SELECTOR.SNACK_BAR);
    $snackBar.innerHTML = text;

    if (!this.#throttle) {
      $snackBar.classList.toggle(CLASS.SHOW);
      this.#throttle = setTimeout(() => {
        this.#throttle = null;
        $snackBar.classList.toggle(CLASS.SHOW);
      }, SNACK_BAR.VISIBLE_TIME);
    }
  };
}

 

 

Debounce는 언제 쓸까?

비슷한 내용이지만, Debounce는 조금 다르다. 

원문에서 든 예시를 한국화 시켜보자.

예를 들어 아웃백에 간다고 치자.

가서 웨이터에게 "샐러드 소스는 키위소스로 주시고 스테이크는 미디엄 레어로, 음료는 레몬에이드로 주세요~"라고 하면서 음식을 시킨다.

그런데 갑자기 주문을 바꾸고 싶어서 "샐러드 소스는 레몬소스로 주시고, 스테이크는 미디엄 웰던으로, 음료는 자몽에이드로 주세요~" 라고 한다. 우리가 말을 다 끝내면 웨이터는 우리가 주문한 두가지 주문에 중 마지막 주문을 제대로 확인하고 나서 주문을 넣으러 간다.

이 예시처럼 Debounce는 연이어 호출되는 함수 중, 가장 마지막 혹은 가장 처음의 함수만 호출하도록 한다.

Input form에서 유저가 입력하는 경우, 유저가 ~초 동안 입력이 없다면, 화면에 보여지게 작성하는 경우가 이 경우에 속한다.

창 크기를 resize 할 때, 유저의 scroll 위치를 측정하고, 최대 50ms마다 응답하기를 바랄 때

 

 

결론 ! 차이 !

쓰로틀은 이벤트가 와다다다 했을때 와다다다한 이벤트를 다 실행하면 성능에 문제가 생기니까 그걸 정해진 시간마다 한번씩만 호출하게 해주는거고, 디바운스는 와다다다 한 이벤트가 있으면 그런 애들을 묶음으로 보고 처음 이벤트나 마지막 이벤트만 실행시켜주는 애야. (?)

 

codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Throttling and Debouncing in JavaScript