1. 타이머

• setTimeout(callback, ms[, params1, ...]): 일정 시간 이후에 콜백함수 실행
• clearTimeout(timerId): 즉시 타이머 중지

• setInterval(callback, ms[, params1, ...]): 일정 시간 마다 콜백함수 실행
• clearInterval(timerId): 즉시 타이머 중지

2. 디바운스

특정 시간을 지정하고 그 시간 이전에 이벤트가 발생할 경우 이전에 실행하려던 이벤트는 종료하고 새로운 이벤트 등록하는 방식이다.

인풋이벤트나 스크롤이벤트처럼 짧은 시간에 많은 이벤트가 지속적으로 발생하는 경우에 사용하는 것이 좋음

검색창에 단어를 입력하면 추천 검색어를 추천해 주는 경우를 자주 볼 수 있다.
그럴 때 하나의 단어를 입력할 때마다 추천검색어를 출력해 주는 것보단 디바운스를 적용해서 추가적인 입력이 없어지고 난 이후에 추천검색어를 보여주면 서버에 대한 부하나 쓸데없는 작업을 줄일 수 있다.

const debounce = (callback, delay) => {
  let timerId = null;
  
  // 클로져 반환
  return event => {
    if(timerId)	clearTimeout(timerId);
    timerId = setTimeout(callback, delay, event);
  }
}

3. 스로틀

일정 시간 간격으로 이벤트가 발생하도록 하는 것이다.

무한 스크롤링같은 부분에서 사용할 수 있다.

특정 스크롤 이후로 내려가면 서버로 추가적인 데이터를 요청해서 한 번에 모든 데이터를 받아오는 것이 아닌 일정량만큼 추가적으로 받아오는 방식을 말한다.

특정 스크롤에 내려갔을 경우 요청을 할 때 스로틀을 적용하지 않으면 데이터를 받아오는 동안 또 데이터를 요청하게 돼서 쓸데없는 요청이 추가적으로 생기므로 스로틀을 적용하면 한 번만 데이터를 요청하고 받을 때까지 추가적인 요청이 없어지므로 제대로 된 처리를 할 수 있게 된다.

const throttle = (callback, delay) => {
  let timerId = null;
  
  // 클로져 반환
  return event => {
    if(timerId)	return;
    timerId = setTimeout(() => {
      callback(event);
      timerId = null;
    }, delay, event);
  }
}