[JS] Debounce 와 Throttle

 

디바운스와 스로틀은 연속적인 api호출로 인해 나타나는 서버 과부화를 막고, 최적화를 하기 위해 사용한다 !

📌 Debounce

연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식이다. ,delay 기간 중 재 호출 시 기존 호출 무시!
 => 마지막(최종) 호출이 delay초(ms) 후에 실행!

const debounce = (cb, delay) => {
  let timer;
  return (...args) => {  
    if (timer) clearTimeout(timer);
    timer = setTimeout(cb, delay, ...args);
  }
}
const act = debounce(a => a + 1, 1000);
act(100);
// 1초 동안 n번 호출 => 실행은 1회만!
// 1초 후 => cb(100) 실행
// 1.5초 후
act(100);   // 마지막 호출부터 delay 후 cb 실행!!

debounce 함수 설명

/**
 *
 * @param {callback fn} cb : 나중에 실행할 콜백 함수
 * @param {number} delay :  콜백 함수 실행 전 대기할 지연 시간(밀리초)
 * @returns 디바운스 된 함수 반환
 */
const debounce = (cb, delay) => {
  let timer; // timer ID를 저장하는 용도
  return (...args) => {
    if (timer) clearTimeout(timer); // 기존 타이머가 있는지 확인 후 clearTimeout을 통해 이전 타이머 취소
    timer = setTimeout(cb, delay, ...args); // 새타이머 설정
  };
};

한번 debounce 함수가 호출되어 act함수가 생성되면, 이 act 함수는 timer에 대한 참조를 가지고 있다.
그래서 동일한 타이머 변수를 사용한다. 클로저 내의 timer변수에 접근하기 때문에 동일한 변수를 공유하게 된다.

 

🤔 언제 사용할까

• 키워드 검색이나 자동완성 기능에서 api 함수 호출 횟수를 최대한 줄이고자 할 때 사용
• 사용자가 창크기 조정을 멈출때까지 기다렸다가 resizing Event를 반영하고 싶을 때
• 사용자가 연속해서 클릭하는 경우 -> 한번만 동작하게끔

📌 Throttle

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것이다. 
이벤트를 일정 주기마다 발생하도록 하는 기술이다.
예시 : 3초에 한번 이벤트 발생 보장

const throttle = (cb, delay) => {
  let timer;
  return (...args) => {
    if (timer) return;
    timer = setTimeout(() => {
      cb(...args);
      timer = null;
    }, delay);
  };
}
const act = throttle(a => a + 1, 1000);
act(1);
// 1초 동안 n번 호출 => 실행은 1회만!
// 10초 동안 n번 호출 => 실행은 10회만!
// 매 1초 마다 => cb(100) 실행
act(100);

throttle 함수 설명

/**
 * 
 * @param {callback fn} cb : 나중에 실행할 콜백 함수
 * @param {number} delay :  콜백 함수 실행 전 대기할 지연 시간(밀리초)
 * @returns 쓰로틀링 된 함수 반환
 */
const throttle = (cb, delay) => {
  let timer;
  return (...args) => {
    if (timer) return; //timer가 있다면 이전의 이벤트가 끝나지 않았다는 의미 -> early return
    
    // delay이후에 실행할 콜백함수 예약
    timer = setTimeout(() => {
      cb(...args);
      timer = null; // 새로운 타이머 설정할 수 있도록 null값 넣어줌
    }, delay);
  };
};

처음 act(1)을 호출하면 타이머가 없다.
그래서 setTimeout()에 의하여 delay시간 이후에 () =>{cd(..args); timer = null}을 실행하게 끔한다.
cd를 실행후 timer를 null로 만들어 주어 다음번 delay시간 초 이후에 또 실행이 가능하도록 setTimeout을 설정해준다. 
만약 timer가 있을 경우에 호출했을 경우 time에는 이전에 실행한 이벤트 시간 id가 있으므로 return이 되게 되어 이벤트가 동작하지 않게 된다.

---

참고

https://velog.io/@jiynn_12/Debounce-와-throttle-에-대해-알아보고-프로젝트에-적용해보자

https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-e02f6bb14627