[REAL Deep Dive into JS] 41. 타이머

young_pallete·2022년 10월 21일

REAL JavaScript Deep Dive

목록 보기

42/46

🚦 본론

타이머는 꽤 많이 쓰는 함수입니다.
setTimeout과 setInterval이 이와 관련되어 있는데요.
이 두 함수에 대해 분석해보고자 합니다.

호출 스케줄링

쉽게 말하자면, 함수의 호출 시점을 예약한다는 의미입니다.
결국 자바스크립트에서, 특정 시간이 되면 함수를 호출하도록 하는 것이 이 타이머 메서드의 목적인데요. 이러한 타이머의 기능을 일컫는 용어입니다.

setTimeout(func, delay, [...args])

핵심은 바로 func입니다.
setTimeout은 콜백함수를 받는데요.
이 함수를 언제 동작시킬지를 설정하는 것이 delay 파라미터입니다. 단위는 ms입니다.

그런데, 이 콜백 함수에 전달되어야 하는 인자가 있을 수 있습니다.
이에 관해서 설정하는 것이 바로 뒤에 선택 가변인자, args입니다.

뒤에 마치 Function.prototype.call 메서드처럼, 가변인자를 쭉~ 써주시면 됩니다.

setTimeout((...args) => console.log(...args), 1000, 1,2,3,4,5)

// 결과: 1초 후 1 2 3 4 5 출력

setInterval(func, delay, [...args])

위의 setTimeout이 delay마다 반복해서 호출된다고 생각하시면 편합니다.
인수의 전달 방식은 setTimeout과 동일합니다.

주의사항

이 함수들을 다룰 때 주의사항이 있는데요.
아무리 컴퓨터라고 하지만, 이를 출력하는 과정에 있어서 완벽히 딱 delay에 맞게 전달하지는 않습니다.

이에 관련하여 궁금하시다면 stackoverflow 글을 참조하시는 것을 추천드립니다.

debounce, throttle

제가 클로저를 얘기할 때마다 가장 좋아하는 개념입니다.
이 메서드가 클로저를 정말 잘 설명해주거든요.

const debounce = (cb, delay) => {
  let timer;
  
  return function(...args) {
    if (timer) clearTimeout(timer)
    
  	timer = setTimeout(cb, delay, ...args)
  }
}

document.body.addEventListener('click', debounce(cb, 1000))

의미는 다음과 같습니다.

timer이라는 친구는 setTimeout 되면 특정 숫자를 반환합니다. 이것을 갖게 되는데요.

이벤트가 특정 시간 내에 여러번 호출된다면,
debounce에서 리턴된 함수가 호출되게 됩니다.

이때 timer는 상위 렉시컬 환경으로써 참조가 되는데요!
여기서 만약 setTimeout이 지금 예약되어 있다면, clearTimeout(timer)을 통해 다시 null 값으로 초기화해주는 겁니다.

이렇게 하다 보면, 결국 마지막에 호출 요청한 것만 예약된 시점에 맞춰 호출이 됩니다.

그렇다면, throttle은 어떨까요?

const throttle = (cb, delay) => {
  let timer = null;
  
  return function(...args) {
    if (timer) return;
  	timer = setTimeout(() => {
	  cb(...args)
      timer = null;
	}, delay, ...args)
  }
}

document.body.addEventListener('click', throttle(cb, 1000))

// 결과: 클릭 시 1초마다 이벤트 객체가 출력됨.