throttle과 debounce

Throttle

function throttle(cb, limit = 100) {
  let _wait = false;
  return (e) => {
    if(_wait) return;
    _wait = true;
    await cb(e);
    setTimeout(() => {
     _wait = false;
    }, limit);
  };
}

• throttle은 func을 반복적으로 호출하는 경우, 임의로 설정한 일정 시간 각격으로 콜백 함수 시행을 보장한다.
• throttle(func1, 100) => 0.1초 동안 10번을 호출해도 첫번째 함수만 실행되고 나머지는 무시되므로 1번만 시행된다.

debounce

function debounce(cb, limit = 100) {
    let timer;
    return (e) => {
        clearTimeout(timer);
        timer = setTimeout(async () => await cb(e), limit)
    }
}

• debounce는 func을 반복적으로 호출하는 경우, 마지막 이벤트만을 시행한다.
• debounce(func1, 100) => 0.1초동안 10번 호출하면 마지막 함수만을 시행해 1번만 시행된다.

언제 사용할까?

• scroll, drag, input 이벤트 등 이벤트가 자주 발생하는 경우
• 특히 repaint, reflow를 일으키는 함수를 포함한다면 성능 최적화를 생각 안할 수가 없다.
• toggle 버튼을 여러번 누르는 경우
• 검색 창에 사용자 입력을 받아 API를 호출하는 경우