JavaScript - setTimeout()으로 함수 실행 지연

자바스크립트에서 함수를 즉시 실행시키지 않고 일정 시간 뒤에 실행되도록 실행을 지연시킬 수 있습니다. 시간 지연 함수 setTimeout()는 실행시킬 함수와 지연시킬 시간을 인자로 받으며, 입력된 시간 뒤에 함수를 실행합니다. 예제와 함께 자세히 알아보겠습니다.

1. setTimeout()의 Syntax

setTimeout()은 인자로 함수와 milliseconds를 받으며, milliseconds 만큼 시간이 지난 뒤에 함수를 실행시킵니다.

setTimeout(func, milliseconds);

2. setTimeout() : 함수 실행 지연 예제

아래 예제에서는 코드의 실행 시간을 쉽게 볼 수 있게 로그의 끝에 new Date()으로 현재 시간도 함께 출력하도록 하였습니다.

function greet() {
  console.log('Hello world: ' + new Date().toLocaleTimeString());
}

console.log('Scheduling a task in 3 sec: '  + new Date().toLocaleTimeString());
setTimeout(greet, 3000);
console.log('Do other things: '  + new Date().toLocaleTimeString());

결과를 보면, setTimeout() 전후의 로그는 거의 동일 시간에 출력되었습니다. 하지만 greet() 함수는 바로 실행되지 않고 3초 뒤에 실행되었습니다. setTimeout()이 호출되었을 때, 3초 뒤에 greet()을 실행하도록 설정하였기 때문에 늦게 실행되었습니다.

Scheduling a task in 3 sec: 8:26:10 PM
Do other things: 8:26:10 PM
Hello world: 8:26:13 PM

3. clearTimeout() : 요청한 지연 작업 취소

setTimeout()은 함수 지연을 요청하고 그 요청에 대한 id를 리턴합니다. clearTimeout(id)는 인자로 전달된 id의 요청을 삭제하여 함수가 호출되지 않도록 합니다.

아래 예제를 보시면 3초 뒤에 greet()이 실행되도록 하였지만, 바로 clearTimeout()을 호출하여 요청을 취소하였습니다. greet()은 수행되지 않고 프로그램이 종료됩니다.

function greet() {
  console.log('Hello world: ' + new Date().toLocaleTimeString());
}

console.log('Scheduling a task in 3 sec: '  + new Date().toLocaleTimeString());
let id = setTimeout(greet, 3000);

console.log('Canceling ' + id + ': ' + new Date().toLocaleTimeString());
clearTimeout(id);

Output:

Scheduling a task in 3 sec: 8:29:45 PM
Canceling 4: 8:29:45 PM