이번에 React App을 만들면서 시계를 넣을 방법을 찾다 스리슬쩍 지나간 setTimeout과 setInterval함수에 대해서 쓰려고한다.
setTimeout
EventLoop에 대한 글에서 잠시 만났던 Web APIs의 함수이다. 어떠한 함수를 일정시간 후에 실행할때 사용하는 함수이다.
setTimeout의 실행 구조
setTimeout함수를 실행시킨다.- stack에
setTimeout함수가 올라가게 된다. - 브라우저는 타이머를 실행시키고, 카운트 다운을 시작하게 된다.
- setTimeout 호출 자체는 완료되었기 때문에 stack에서 함수가 지워지게 된다.
- Web API는 갑자기 작성된 코드에 끼어들 수 없으므로 callback queue에 들어가게된다.
- EventLoop에 의해 stack에 push하게 된다.
avaScript 런타임 작동방식, 비동기와 이벤트 루프
setTimeout 사용법
setTimeout함수는 첫 번째 인자로 실행할 함수를 받고, 두 번째 인자로 시간(ms)을 받는다.
setTimeout(() => console.log("3초뒤 실행됩니다"),3000)
// 3초 뒤에 "3초뒤 실행됩니다." 출력setTimeout의 세 번째 인자부터는 가변인자를 받게 된다. 콜백함수가 파라미터를 받을 경우에 대한 값을 세 번째 부터 받에 되는것이다. 말로는 어려우니 예제를 보면 한번에 이해하기 쉬워진다.
const addNumber = (a, b) => {
return console.log(a + b)
}
setTimeout(addNumber, 3000, 1, 2)
// 3초 뒤에 3 출력setTimeout함수는 타임아우 아이디(Timeout ID)라고 불리는 숫자를 반환한다. 타임아웃 아이디는 setTimeout함수를 호출할 때마다 내부적으로 생성되는 타이머 객체를 가리키고 있다. 이 값을 인자로 clearTimeout함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다.
const timeoutId = setTimout(() => {
console.log("안녕하세요.")
}, 2000)
clearTimeout(timeoutId)
// 아무것도 출력되지 않음.setInterval
웹페이지의 특정 부분을 주기적으로 업데이트 해줘야하거나, API로부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 많이 사용한다. 이럴땐 단 한번만 호출되는 setTimeout보단 setInterval이 좀 더 편하게 사용할 수 있다.
setInterval 사용법
setInterval 함수도 위의 setTimeout함수와 비슷하게 첫 번째인자로 콜백함수를 받고, 두 번째 인자로 시간(ms)을 받는다.
setInterval(() => console.log("2초마다 찍힘"), 2000)
// 2초후 "2초마다 찍힘"
// 2초후 "2초마다 찍힘"
// 2초후 "2초마다 찍힘"
// 2초후 "2초마다 찍힘"
시계와 비슷하게 숫자를 변수에 저장해놓고 1씩 증가시키는 것도 가능하다.
let count = 0
setInterval(() => console.log(count++), 1000)
// 1초후 0
// 1초후 1
// 1초후 2
// 1초후 3
// 1초후 4setInterval도 setTimeout과 비슷하게 아이디를 반환하는데 이를 인터벌 아이디(interval ID)라는 숫자를 반환하게 된다. 인터벌 아이디는 setInterval 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가르키고 있다. 이 값을 인자로 clearInterval함수를 호출하면 setInterval로 주기적으로 호출되던 함수를 중단할 수 있다.
let count = 0
const intervalId = setInterval(() => {
console.log(count++)
}, 1000)
// 1초후 0
// 1초후 1
// 1초후 2
// 1초후 3
// 1초후 4
clearInterval(intervalId)
// 출력되지 않음.
결론
위의 두 함수의 기본 사용법과 특징을 알아봤다. 위의 두 함수를 사용할 때는, clear함수를 사용하여 타이머를 청소해주는게 좋겠다. 요즘엔 React를 많이 쓰다보니, SAP를 주로 쓸텐데 위의 두 함수를 사용할때 clear해주지 않으면 메모리 누수로 이어질 수 있기 때문이다.
