setTimeout() 콜백에 매개변수 전달하기
JavaScript에서 setTimeout() 함수의 콜백에 매개변수를 전달하려면 아래와 같은 문법을 사용합니다.
setTimeout(functionname, milliseconds, arg1, arg2, arg3...)
각 매개변수의 의미는 다음과 같습니다.
- functionname − 실행하고자 하는 함수의 이름입니다.
- milliseconds − 지연 시간을 나타내는 밀리초(ms) 값입니다.
- arg1, arg2, arg3 − 지정한 시간이 지난 후 함수에 전달될 인자들입니다.
즉, 세 번째 인자부터는 순서대로 콜백 함수의 첫 번째, 두 번째, 세 번째 매개변수로 전달됩니다. 이 방식은 추가 라이브러리나 복잡한 처리 없이도 간단하게 값을 넘길 수 있다는 장점이 있습니다.
예제
다음 코드를 실행하면 setTimeout() 콜백에 매개변수를 전달하는 동작을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="timeFunction()">Submit</button>
<script>
function timeFunction() {
setTimeout(function(){ alert("After 5 seconds!"); }, 5000);
}
</script>
<p>Click the above button and wait for 5 seconds.</p>
</body>
</html>
버튼을 클릭한 뒤 약 5초가 지나면 알림 창(alert)이 표시됩니다.
참고: 익명 함수로 감싸는 방법
매개변수를 전달하는 또 다른 일반적인 방법은 콜백을 익명 함수로 감싸는 것입니다.
function greet(name) {
alert("Hello, " + name + "!");
}
setTimeout(function() {
greet("John");
}, 3000);
이처럼 익명 함수 내부에서 원하는 인자와 함께 함수를 호출하면, 지연 시간 이후 해당 값이 그대로 전달됩니다. 또는 bind() 메서드를 활용하여 setTimeout(greet.bind(null, "John"), 3000)과 같이 작성할 수도 있습니다.