[JS] 쓰로틀링, 디바운스

 

# 쓰로틀링

이벤트호출에 강제로 인터벌을 발생시켜서 핸들러함수의 물리적인 호출 횟수 줄임

 

 

js 예시 적용전

window.addEventListener('scroll', function (e) { 
    console.log('스크롤 이벤트 발생!'); 
})

적용 후

settimeout 끝날 때 변수를 null으로 바꿔서 0.2초마다 함수가 실행되게 하는 로직이다.

let throttler; 
window.addEventListener('scroll', function (e) { 
  if (throttler) { return } 
  throttler = setTimeout(function() { 
    console.log('스크롤 이벤트 발생!'); 
    throttler = null; 
  }, 200); 
})

이벤트 발생이 훨씬 줄어든것을 볼수 있다.

 

 

 

# 디바운스

일정 시간을 주기로 특정이벤트가 계속 실행중이면 지연시간을 계속 초기화시키면서

아예 핸들러함수의 호출 자체를 막음

실사용예) 인풋의 값이 바뀔때 마다 무거운 함수를 호출해야될때

 

 

 

js 예시 적용전

function debounce() {
  console.log('값 변경');
}

위 함수를 input에 change 이벤트로 넣어준다

내가 입력 할 때마다 값 변경이 감지된다.

 

 

 

적용 후

함수가 실행되면 timer를 초기화 해서 settimeout안에 함수가 실행되지 않게 하는 로직이다.

onchange나 resize 또는 scroll 에 적용시키면 된다.

function debounce() {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      console.log('값 변경')
    }, 지연시간);
  };
}

 

내가 지연시간안에 입력했을 땐 감지되지않고

시작과 마지막에 다입력하고 나서 함수가 실행되었다.

 

 

 

 

쓰로틀링과의 차이는 쓰로틀링은 설정시간마다 실행시키는 거라면

디바운스는 설정시간안에 입력이 되면 지연시간이 다시 초기화되는 식이다

쓰로틀링엔 스크롤을 적용했고

디바운스에는 input 검증하는 기능을 적용했다