setTimeout(), setInterval()
setTimeout()
•
만료된 후, 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다
var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);
JavaScript
복사
파라미터
function
•
타이머가 만료된 뒤 실행할 function
code
•
함수 대신 문자열을 지정하는 대체 구문으로, 타이머가 만료될 때 코드로 컴파일 후 실행
•
eval()이 보안 취약점인 것과 같은 이유로 사용을 권장하지 않는다
delay
•
주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간
•
생략하거나 0을 지정할 경우 ‘즉시’, 더 정확히는 다음 이벤트 사이클에 실행한다는 뜻이다.
•
그러나 실제 딜레이는 의도했던 것보다 더 길 수 있다
arg1, …, argN
•
function에 전달할 추가 매개변수이다
사용
setTimeout(() => console.log("2초 후에 실행됨"), 2000);
JavaScript
복사
•
첫번째 파라미터 : 실행할 코드를 담고 있는 함수
•
두번째 파라미터 : 지연 시간을 밀리초(ms) 단위로 받는다 (2000 ms = 2초)
return 값
•
반환하는 timeoutID는 양의 정수로서 setTimeout()이 생성한 타이머를 식별할 때 사용
•
이 값을 clearTimeout()에 전달하면 타이머를 취소할 수 있다
•
같은 객체에서 반복해 호출하는 setTimeout() 또는 setInterval() 함수는 절대 같은 timeoutID를 사용하지 않는다.
•
그러나 다른 객체끼리는 다른 ID풀을 사용한다
→ clearTimeout()으로 타이머를 취소할 수 있다
→ 어떤 함수를 몇 밀리초마다 반복적으로 호출해야할 필요가 있으면 setInterval()을 사용
const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);
// 아무것도 출력 안됨
JavaScript
복사
비동기 함수
•
setTimeout()은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않는다
•
setTImeout()을 사용해서 다음 함수 호출을 ‘일시정지’ 할 수는 없다
setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
setTimeout(() => {console.log("두 번째 메시지")}, 3000);
setTimeout(() => {console.log("세 번째 메시지")}, 1000);
// 콘솔 출력:
// 세 번째 메시지
// 두 번째 메시지
// 첫 번째 메시지
JavaScript
복사
setInterval()
•
웹 페이지의 특정 부분을 주기적으로 업데이트 해줘야 하거나, 어떤 API로부터 변경된 데이터를 주기적으로 받아와야 하는 경우 사용
•
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용
•
함수 API는 setTimeout()함수와 대동소이
•
첫번째 파라미터 : 실행할 코드
•
두번째 파라미터 : 반복주기를 밀리초(ms) 단위로 받는다
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)
JavaScript
복사
setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000);
// 3
// 2
// 8
// 3
// 1
// ...
JavaScript
복사
let count = 0;
setInterval(() => console.log(++count), 2000);
// 1
// 2
// 3
// 4
// ...
// 10
JavaScript
복사
•
setInterval() 함수는 인터벌 아이디(Interval ID)라고 불리는 숫자를 반환
•
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);
JavaScript
복사
주의점
setTimeout() 함수와 setInterval() 함수를 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해주는 습관을 들이자
→ 특히 SPA(Single Page Application)을 개발할 때는 이 부분이 메모리 누수(memory leak)로 이어질 수 있기 때문에 각별히 주의가 필요하다
타이머의 시간은 정확한가?
No! 자바스크립트는 기본적으로 한 번에 한 가지 일만 할 수 있다. 따라서 이미 많은 일을 하고 있다면 설정한 시간이 되어도 setTimeout에 지정된 작업이 수행되지 않는다. 기존에 하고 있던 일이 끝나야 setTimeout에 지정한 작업이 실행된다