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개 이상의 튜토리얼을 얻을 수 있습니다. 튜토리얼의 주제는 문자열 조작, 날짜 조작, 배열과 객체 함수, 자바스크립트 알고리즘 등 다양합니다.