setTimeout 및 setInterval에 매개변수를 전달하는 방법
다음 코드를 살펴보세요.
var str = 'aaa'; var num = 2; function auto(num){ alert(num); } setTimeout('auto(num)',4000);
이렇게 작성하면 정상적으로 작동할 수 있지만, 매개변수 전달이라고 하기보다는 직접 사용하는 전역 변수라고 말하는 것이 더 좋습니다. 따라서 일반적으로 이러한 작성 방법은 필요하지 않습니다.
코드 수정:
//var str = 'aaa'; var num = 2; function test(){ var str = 'bbb'; setTimeout('auto(str)',4000); } function auto(a){ alert(a); } test();
이런 방식으로 작성하면 str의 전역 선언의 주석 처리를 제거하면 aaa가 출력됩니다. 즉, 함수는 여전히 전역 변수를 호출합니다.
아래 코드를 보세요:
//var str = 'aaa'; var num = 2; function test(){ var str = 'bbb'; setTimeout('auto("str")',4000); } function auto(a){ alert(a); } test();
위의 str에 주의하세요. 이렇게 작성하면 "str"이 출력됩니다. 즉, 타이머가 함수를 호출한 후 str이 직접 매개변수로 사용됩니다. 이렇게 전달된 매개변수는 항상 문자열입니다. 이는 우리가 원하는 결과가 아닙니다.
문자열 이외의 매개변수를 전달하려면 클로저를 사용할 수 있습니다. 다음 코드를 참조하세요.
//var str = 'aaa'; var num = 2; function test(){ var str = 'bbb'; setTimeout(auto(str),4000); } function auto(str){ return function(){ alert(str); } } test();
출력 결과는 'bbb'입니다. auto(str)에 따옴표를 추가하면 오류가 보고됩니다.
물론 이렇게 써도 좋습니다.
var num = 2; function test(){ var str = 'bbb'; //setTimeout(auto(str),4000); setTimeout(function(){alert(str)},4000); } function auto(str){ return function(){ alert(str); } } test();
마지막으로 주의할 점은 클로저를 사용하여 매개변수를 전달하지 않는 경우 타이머가 호출하는 함수를 따옴표로 묶어야 하며 오류가 보고된다는 것입니다. 위의 상황은 setInterval()에도 적합합니다.
setTimeout 및 setInterval의 함수 호출
에는 다음 코드가 있습니다.
var num = 2; function auto(){ alert(num); } setTimeout(auto(),4000);
이 프로그램에서는 테스트 시 팝업 경고창을 바로 확인할 수 있습니다. 즉, 위의 방법으로 함수를 참조하면 타이머가 작동하지 않습니다.
마찬가지로 위의 setInterval 작성 방법은 제대로 작동하지 않습니다. 프로그램은 경고 상자를 한 번만 띄운 다음 오류를 보고할 수 있습니다.
타이머를
setInterval('auto()',4000); setTimeout('auto()',4000);
프로그램이 잘 작동합니다.
함수를 호출하기 위해 auto()를 사용하지 않고 단지 auto만 사용한다면 어떤 모습일까요?
var str = 'aaa'; var num = 2; function auto(){ alert(num); } //setInterval(auto,4000); setTimeout(auto,4000);
이러한 방식으로 작성된 모든 프로그램은 정상적으로 작동할 수 있습니다.
auto에 따옴표를 추가하면
//setInterval('auto',4000); setTimeout('auto',4000);
둘 다 제대로 작동하지 않습니다.