[Note_deepDive]41장 타이머

41.1 호출 스케줄링

- 호출 스케줄링: 타이머 함수를 사용해서 브라우저를 통해 일정 시간 후로 호출을 예약하는 것을 말한다.

- 타이머 함수들은 브라우저,Node 모두에 존재하는 호스트 객체다.

- 타이머 함수들인 비동기 방식으로(브라우저가 시간을 세다가 콜백을 푸시) 실행된다.

 

41.2 타이머 함수

41.2.1 setTimeout / clearTimeout

- setTimeout(func, delay, param1, param2 ...): 콜백함수, 시간(ms 1000분의 1초), 콜백함수로 전달할 파라미터로 이루어 진다. IE9이하에서는 파라미터전달이 불가능하다. 리턴값은 고유한 타이머 id값이다. 이를 사용해서 타이머를 중간에 취소할 수도 있다.

- clearTimeout(timerId): 타이머 아이디를 사용해 타이머가 종료되기 이전에 취소하는 API다.

 

41.2.2 setInterval / clearInterval

 - setInterval(func, delay, param1, param2...): 작성법은 setTimeout과 동일한데, 시간초가 완료되면 종료되는게 아니고 타이머가 다시 돌아간다. id를 받아서 clearInterval을 해줘야 종료가 가능하다. 

 - clearInterval(Id): Interval Id를 인자로 받아 해당 인터벌을 중지하는 API다.

41.3 디바운스와 스로틀

과도한 이벤트 호출에 대한 처리로 디바운스와 스로틀링은 매우 유용한 기술이다.

 ex) 실시간 검색, 스크롤 이벤트, 드래그앤 드롭 이벤트

 

41.3.1 디바운스: 일정시간 동안 이벤트 호출이 발생하지 않을 때, 해당 이벤트를 실행하는 것을 구현하는 방식이다.

const debounce = (callback, delay) => {
	let timerId;
    return ( e => {
      if(timerId) clearTimeout(timerId);
      timerId = setTimeout(callback, delay, e);
      }
    )
}

<input onChange = { debounce((e) => { setState(e.target.value);}, 500) } />

이런 식으로 setTimeout을 활용해서 직접 구현해서 사용할 수도 있지만, lodash의 debounce 사용을 권장한다.

 

41.3.2 스로틀: 이벤트가 연속적으로 발생할 때, 이벤트를 일정시간으로 그룹화해서 일정한 간격으로 호출되게 구현하는 방식이다. 

 

const throttle = (callback, delay) => {
  let timberId;
  return (e => {
      if(timerId) return;
      timerId = setTimeout(()=>{
        callback(e);
        timerId = null;
      }, delay, e);
    }
  )
}

<div onScroll={throttle((e)=>{}. 500)}/>

- 이런 식으로 사용하고 스로틀과 같이 이벤트 발생시 실행은 해야하는데 delay간격으로 실행이되게끔 구현할 때 사용한다. 실무에서는 직접 구현하지 말고 lodash의 throttle함수를 사용하는걸 권장한다.