[JavaScript] setTimeout() 함수

728x90

setTimeout()

전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다.

Syntax

var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);

반환 값

반환하는 timeoutID 는 양의 정수로써 setTimeout() 이 생성한 타이머를 식별할 때 사용한다.

이 값을 clearTimeout() 에 전달하면 타이머를 취소할 수 있다.

같은 객체에서 반복호출하는 setTimeout() 또는 setInterval() 메서드는 절대 같은 timeoutID 를 사용하지 않는다.

그러나 다른 객체끼리는 다른 ID 풀을 사용한다.

Description

clearTimeout 으로 타이머를 취소할 수 있다.

어떤 함수를 몇 밀리초마다 반복적으로 호출해야할 필요가 있다면 setInterval() 을 사용한다.

비동기 함수로 작업하기

setTimeout() 은 비동기 함수로써, 함수 스택의 다른 함수 호출을 막지 않는다. 즉, setTimeout() 을 사용해서 다음 함수 호출을 "일시정지" 할 수는 없다.

setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
setTimeout(() => {console.log("두 번째 메시지")}, 3000);
setTimeout(() => {console.log("세 번째 메시지")}, 1000);

// 콘솔 출력:

// 세 번째 메시지
// 두 번째 메시지
// 첫 번째 메시지

첫 번째 setTimeout() 호출이 두 번째 호출 전에 5초의 "정지" 구간을 만들지 않음에 주의해야 한다.

대신, 위의 코드는 첫 함수 실행을 5초간 대기하는 동시에 두 번째 함수 실행을 3초간 대기하고, 다시 동시에 세 번째 함수의 실행도 1초간 대기한다.

이후 1초가 지나면 첫 함수와 두 번째 함수 모두 아직 타이머가 끝나지 않았기 때문에 세 번재 함수 먼저 실행이 된다.

그 후에 두 번재, 그리고 마지막으로 첫 번째 함수가 각자의 타이머 만료 후 실행된다.

출처 : https://developer.mozilla.org/ko/docs/Web/API/setTimeout