Throttle과 Debounce란?

자주 사용 되는 이벤트나 함수 들의 실행되는 빈도를 줄여서, 성능 상의 유리함을 가져오기 위한 개념이다.

1. Throttle

• 일정 시간 동안의 이벤트 실행을 막고, 입력을 모아서 일정시간이 지날 때마다 한번씩 출력한다.
• 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격으로 콜백 함수를 실행한다.

2. Debounce

• 입력 주기가 끝난 후 출력한다.
• 동일 이벤트가 반복적으로 실행 될 경우 마지막 이벤트 실행 후 일정 시간이 지나는 동안 이벤트가 발생하지 않으면 그 때 콜백함수를 실행한다.

자바스크립트로 구현하기

1. Throttle

function throttle(callback, wait) {// callback: 실행 대상인 함수
  let waiting = true;  // true로 주어서 콜백함수가
                        // 처음 한번은 바로 실행되도록 함
  return function() {
    if (waiting) {
      callback();       
      waiting = false;   // false로 바꿔 실행되지 않도록 한다.
      setTimeout(() => {// wait만큼 시간이 지난 후,
        waiting = true;// true로 바뀌면서 다시 실행됨.
      }, wait);
    }
  };  
};

2. Debounce

function debounce(callback, wait) { //callback: 실행대상인 함수
  let timeout
    
  return function(...args) {
      clearTimeout(timeout) //1회 실행에서는 작동하지 않음
      timeout = setTimeout(() => {
          callback();
      }, wait);  // wait만큼 시간 지난 후
  };             // callback함수 실행하도록 지정
}

wait 시간 이내에 callback 함수가 반복 호출될 경우, clearTimeout이 작동하여 함수가 실행되지 않는다.
wait 시간 이내에 callback 함수가 반복 호출되지 않으면, timeout에 할당된 setTimeout()함수에 따라 wait 시간 이후 callback 함수를 실행한다.