setTimeout, setInterval
setTimeout() 사용법
어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 생길 수 있다.
이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있다.
setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수(콜백함수)를 받는다.
두번째 인자로 지연 시간을 밀리초(ms) 단위로 받게 된다.
간단한 예로, 2초를 기다린 후에 어떤 문자열을 콘솔에 출력해보는 예시를 만들어보겠다.
setTimeout(() => console.log("2초 후에 실행됨"), 2000);2초 후에 실행됨setTimeout() 함수는 세번째 인자부터는 가변 인자를 받는다. 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길 인자를 명시해주기 위해서 사용한다.
(필요한 경우, 이렇게 구현할 줄 안다면 매우 간편할 것이다)
예를 들어, 두 개의 수를 인자로 받아 더한 값을 출력해주는 add()라는 함수에 인자로 3과 4를 넘겨 2초를 기다린 후에 호출되게 하려면 다음과 같다.
function add(x, y) {
console.log(x + y);
}
setTimeout(add, 2000, 3, 4);7setTimeout() 함수는 타임아웃 아이디(Timeout ID)라고 불리는 숫자를 반환한다.
타임아웃 아이디는 setTimeout() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있다.
이 값을 인자로 clearTimeout() 함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다!
const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);
// 아무 것도 출력 안 됨setInterval() 사용법
웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있다.
이럴 때는 자바스크립트의 setInterval() 함수를 사용하면 된다.
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용하게된다. 함수 API는 setTimeout() 함수와 사용 방법 면에서는 비슷하다!
첫번째 인자로 실행할 코드를 담고 있는 함수(콜백함수)를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.
간단한 예로, setInterval() 함수를 사용하여 콘솔에 현재 시간을 2초마다 출력해보면 다음과 같다.
setInterval(() => console.log(new Date()), 2000);Sun Dec 12 2021 12:29:06 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:08 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:10 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:12 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:14 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:16 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:18 GMT-0500 (Eastern Standard Time)다른 예로, 0과 9 사이의 수를 무작위로 생성하여 2초마다 출력해보겠다.
setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000);3
2
8
3
1
9
4
8
3
0
9
5
1
3
1
숫자를 변수에 저장해놓고 2초 마다 1씩 증가시키는 것도 가능하다.
let count = 0;
setInterval(() => console.log(++count), 2000);1
2
3
4
5
6
7
8
9
10setInterval() 함수는 인터벌 아이디(Interval ID)라고 불리는 숫자를 반환하게된다. 인터벌 아이디는 setInterval() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있다. 이 값을 인자로 clearInterval() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.
(이 부분은 강의에서는 다루지 않았지만, 추후 웹사이트 제작시 크게 도움이 될 것 같다)
> const intervalId = setInterval(() => console.log(new Date()), 2000);
< Sun Dec 12 2021 12:45:31 GMT-0500 (Eastern Standard Time)
< Sun Dec 12 2021 12:45:33 GMT-0500 (Eastern Standard Time)
< Sun Dec 12 2021 12:45:35 GMT-0500 (Eastern Standard Time)
> clearInterval(intervalId);마지막으로 setTimeout() 함수와 setInterval() 함수를 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해주는 습관을 들이는 것이 좋다고 한다. 특히, SPA(Single Page Application)을 개발할 때는 이 부분이 메모리 누수(memory leak)로 이어질 수 있기 때문에 각별히 주의가 필요하다고 한다.
(실제 프로젝트 진행시, 체화 할 것!)
