Original article: JavaScript setTimeout() – How to Set a Timer in JavaScript or Sleep for N Seconds

이번 튜토리얼에서는 자바스크립트의 내장 함수인 setTimeout()이 어떻게 작동되는지 코드 예시를 통해 이해하는 시간을 가져보겠습니다.

자바스크립트에서 setTimeout() 사용하기

setTimeout()은 특정 시간이 지난 다음에 코드를 실행하는 함수입니다. 자바스크립트 코드에 일종의 타이머를 설정하는 것입니다.

setTimeout() 함수 예제

setTimeout(function(){
    console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

위 코드는 콘솔에 "setTimeout() example..."를 먼저 출력하고, 2초가 지난 다음 "Hello World"을 출력합니다.

setTimeout() 함수 문법은 이렇습니다:

setTimeout() 함수 문법

setTimeout(function, milliseconds, parameter1, parameter2, ...);

setTimeout() 함수의 첫 번째 매개변수에는 여러분이 실행시킬 자바스크립트 함수를 넣습니다. function에 함수 자체를 넣을 수도 있고, 아래와 같이 기명 함수로 넣기도 합니다.

setTimeout() 함수에 기명함수 사용한 예시

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting);

그리고 다음 코드가 실행되기 전까지 기다리도록 milliseconds를 매개 변수로 전달할 수도 있습니다.

1초는 1,000 밀리초입니다. 만약 3초를 기다리게 하고 싶다면, 3000을 두 번째 매개 변수로 전달해야 합니다.

3초간 기다리는 setTimeout() 함수

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting, 3000);

만약 두 번째 매개 변수를 생략한다면, setTimeout()은 function 함수를 즉시 실행합니다.

마지막으로, setTimeout() 함수에 매개 변수들을 추가로 넣을 수도 있습니다.

setTimeout()에 추가로 매개변수 전달하기

function greeting(name, role){
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

여러분은 아래와 같이 "함수에 바로 매개 변수를 바로 전달하면 안될까?"라고 물을 수도 있습니다.

setTimeout(greeting("Nathan", "Software developer"), 3000);

그럼 자바스크립트는 기다림 없이 function을 실행하게 됩니다. 왜냐하면 첫 번째 매개 변수로 함수 참조(function reference)가 아닌 함수 호출(function call)을 전달했기 때문입니다.

따라서 함수에 어떤 매개변수들을 전달하고 싶다면, setTimeout() 함수를 통해 전달해야 합니다.

그러나 setTimeout()에 추가적인 매개 변수를 전달하는 경우는 매우 드물기 때문에 이에 대해 크게 걱정하지 않아도 됩니다.

setTimeout 함수 취소하는 방법

clearTimeout()를 사용하면 setTimeout()의 함수 실행을 취소할 수 있습니다. 이를 위해 clearTimeout() 함수는 setTimeout()으로부터 반환된 id를 필요로 합니다.

clearTimeout() 문법

clearTimeout(id);

여기 clearTimeout() 함수를 사용하는 예시가 있습니다.

clearTimeout() 함수 활용 예시

const timeoutId = setTimeout(function(){
    console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

만약 여러 개의 setTimeout() 함수들을 사용할 경우, 각 함수 호출에서 반환되는 ID 값들을 저장한 다음, 함수의 수 만큼 clearTimeout() 함수를 호출해야 합니다.

결론

setTimeout() 함수는 특정 함수의 실행 시기를 설정할 수 있는 자바스크립트 내장 함수입니다. 대기 시간을 전달하기 위해 밀리초 기준의 시간을 전달합니다. 예를 들어, 1초를 기다리게 하고 싶다면 1,000 밀리초를 입력하는 식이죠.

setTimeout()의 함수 실행을 취소하고 싶다면, clearTimeout() 함수를 사용하면 됩니다. 이때 setTimeout() 함수를 호출 시 반환되는 ID 값을 전달해야 합니다.

이 글을 읽어주셔서 감사합니다

자바스크립트에 대해 더 많이 알고싶으시다면, 저의 웹사이트 sebhastian.com를 방문하세요. 이곳에서 상세한 설명과 코드 예시가 포함된 자바스크립트 프로그래밍에 대한 100개 이상의 튜토리얼을 얻을 수 있습니다. 튜토리얼의 주제는 문자열 조작, 날짜 조작, 배열과 객체 함수, 자바스크립트 알고리즘 등 다양합니다.