debounce, throttling

Status

Done

Study Date

Oct 24, 2023

debounce

연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것

이벤트나 함수의 실행 빈도를 줄여서, 성능 개선을 위함이다

ex) 타자를 친 후에 3초 동안 아무것도 안해야 콘솔에 값을 출력한다


var timer;

$input.addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('작성 중 : ', e.target.value);
  }, 3000);
});

throttling

↔ debounce

함수들이 특정 시간 내에 연이어 호출되면 다 받아 들이지 않고, 처음 함수만 호출하도록 하는 것