diff options
Diffstat (limited to 'files/ko/web/api/windowtimers/settimeout/index.html')
| -rw-r--r-- | files/ko/web/api/windowtimers/settimeout/index.html | 429 |
1 files changed, 429 insertions, 0 deletions
diff --git a/files/ko/web/api/windowtimers/settimeout/index.html b/files/ko/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..7b338a83fa --- /dev/null +++ b/files/ko/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,429 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +tags: + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>[, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]); +<em>var timeoutID</em> = window.setTimeout(<em>code</em>[, <em>delay</em>]); +window.setTimeout(function, milliseconds); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code id="func">func</code></dt> + <dd>{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.</dd> + <dt><code>code</code></dt> + <dd>선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.<br> + 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 <strong>보안 위험성</strong>을 이유로 <strong>권장되지 않습니다.</strong></dd> + <dt><code>delay</code> {{optional_inline}}</dt> + <dd>타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.<br> + 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;<br> + 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.</dd> + <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt> + <dd>타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.</dd> +</dl> + +<div class="note"> +<p>Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.<br> + 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (<a href="#Callback_arguments">Callback arguments</a>를 봐주세요)</p> +</div> + +<h3 id="반환_값">반환 값</h3> + +<p>반환되는 <code>timeoutID</code>는 숫자이고, <code>setTimeout()</code>을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;<br> + 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.</p> + +<p><code>setTimeout()과</code> {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, <code>clearTimeout()과 </code>{{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.<br> + 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 <code>setTimeout()과</code> <code>clearTimeout()에 연결합니다</code>.<br> + 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 <code>clearTimeout()</code>에 사용되는 ID가 저장됩니다.<br> + 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Live Example</p> +<button onclick="delayedAlert();">Show an alert box after two seconds</button> +<p></p> +<button onclick="clearAlert();">Cancel alert before it happens</button> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var timeoutID; + +function delayedAlert() { + timeoutID = window.setTimeout(slowAlert, 2000); +} + +function slowAlert() { + alert("That was really slow!"); +} + +function clearAlert() { + window.clearTimeout(timeoutID); +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('Example')}}<br> + <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout() 예제</code></a>도 봐주세요.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, <code>setTimeout()</code> 또는 <code>setInterval()</code>을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면<code>(e.g. </code>Internet Explorer 9 이하<code>)</code>, HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.</p> + +<pre class="brush: js">/*\ +|*| +|*| 임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세). +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval +|*| +|*| Syntax: +|*| var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]); +|*| var timeoutID = window.setTimeout(code, delay); +|*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]); +|*| var intervalID = window.setInterval(code, delay); +|*| +\*/ + +(function() { + setTimeout(function(arg1) { + if (arg1 === 'test') { + // feature test is passed, no need for polyfill + return; + } + var __nativeST__ = window.setTimeout; + window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function() { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + }, 0, 'test'); + + var interval = setInterval(function(arg1) { + clearInterval(interval); + if (arg1 === 'test') { + // feature test is passed, no need for polyfill + return; + } + var __nativeSI__ = window.setInterval; + window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function() { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + }, 0, 'test'); +}()) +</pre> + +<h2 id="IE">IE</h2> + +<p>IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:</p> + +<pre class="brush: js">/*@cc_on + // conditional IE < 9 only fix + @if (@_jscript_version <= 9) + (function(f){ + window.setTimeout=f(window.setTimeout); + window.setInterval=f(window.setInterval); + })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}}); + @end +@*/ +</pre> + +<p>혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:</p> + +<pre class="brush: html"><!--[if lte IE 9]><script> +(function(f){ +window.setTimeout=f(window.setTimeout); +window.setInterval=f(window.setInterval); +})(function(f){return function(c,t){ +var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)} +}); +</script><![endif]--> +</pre> + +<h2 id="예시">예시</h2> + +<p>다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.</p> + +<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000); +</pre> + +<p>위 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>으로도 작성하실 수 있습니다.</p> + +<pre class="brush: js">var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000); +</pre> + +<p>다른 하나는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>를 이용하는 것 입니다.</p> + +<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000); +</pre> + +<h2 id="this_문제">"<code>this</code>" 문제</h2> + +<p><code>setTimeout()</code>에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>를 참고해주세요.</p> + +<h3 id="설명">설명</h3> + +<p><code>setTimeout()</code>에 의해 실행된 코드는 별도의 실행 컨텍스트에서 <code>setTimeout</code>이 호출된 함수로 호출됩니다. 호출된 함수에 대해서는 <code>this</code> 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 <code>window</code>) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: </p> + +<pre class="brush: js">myArray = ["zero", "one", "two"]; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // prints "zero,one,two" +myArray.myMethod(1); // prints "one"</pre> + +<p>위와 같이 동작하는 이유는 <code>myMethod</code> 호출될 때, <code>this</code>는 <code>myArray</code>로 설정되므로, 함수 내에서의 <code>this[</code>속성<code>]</code>은 <code>myArray[</code>속성<code>]</code>와 같습니다. 하지만, 다음 예제를 보면:</p> + +<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력 +setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력</pre> + +<p><code>myArray.myMethod</code> 함수는 <code>setTimeout</code>에 전달되고, 호출될 때 t<code>his</code>는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 <code>this</code>를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, <code>call<font face="Open Sans, Arial, sans-serif">을</font> </code>사용해<code> this</code>를 설정하는 것도 동작하지 않습니다.</p> + +<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error +</pre> + +<h3 id="가능한_해결책">가능한 해결책</h3> + +<p>일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:</p> + +<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력 +setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력</pre> + +<p>화살표 함수(Arrow Function) 역시 가능한 대안입니다:</p> + +<pre class="brush: js">setTimeout(() => {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력 +setTimeout(() => {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력</pre> + +<p><code>this</code> 문제를 해결하는 또다른 방법은 전역함수 <code>setTimeout()<font face="Open Sans, Arial, sans-serif">과 </font></code><code>setInterval()<font face="Open Sans, Arial, sans-serif">를 </font></code><code>this</code> 객체를 전달할 수 있는 전역함수로 대체하고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>을 사용하여 콜백을 설정합니다:</p> + +<pre class="brush: js">// Enable setting 'this' in JavaScript timers + +var __nativeST__ = window.setTimeout, + __nativeSI__ = window.setInterval; + +window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, + aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +}; + +window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, + aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +};</pre> + +<div class="note">위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.</div> + +<p>새로운 기능 테스트:</p> + +<pre class="brush: js">myArray = ["zero", "one", "two"]; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but... +setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds +</pre> + +<div class="note">JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.</div> + +<p><code>bind()</code>를 사용한 예제:</p> + +<pre class="brush: js">myArray = ["zero", "one", "two"]; +myBoundMethod = (function (sProperty) { + console.log(arguments.length > 0 ? this[sProperty] : this); +}).bind(myArray); + +myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function +myBoundMethod(1); // prints "one" +setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding +setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds +</pre> + +<h2 id="참고">참고</h2> + +<p>Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.</p> + +<p><code>setTimeout()을</code> 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:</p> + +<pre class="brush: js">function foo(){ + console.log('foo has been called'); +} +setTimeout(foo, 0); +console.log('After setTimeout');</pre> + +<p>콘솔에 이렇게 쓰여질겁니다:</p> + +<pre class="brush: js">After setTimeout +foo has been called</pre> + +<p>그 이유는 <code>setTimeout가 지연시간 0으로</code> 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.</p> + +<h3 id="문자열을_넘길경우">문자열을 넘길경우</h3> + +<p> <code>setTimeout()</code>에<code> </code>함수대신 문자열을 넘기면 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> </code>사용했을 때와 같은 위험성을 가집니다<code>. </code></p> + +<pre class="brush: js">// 권장 +window.setTimeout(function() { + alert("Hello World!"); +}, 500); + +// 비권장 +window.setTimeout("alert('Hello World!');", 500); +</pre> + +<p><code>setTimeout</code>에 전달된 문자열은 전역 context에서 해석하므로, <code>setTimeout()</code>이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.</p> + +<h3 id="지정된_것보다_더_오래_지연되는_이유">지정된 것보다 더 오래 지연되는 이유</h3> + +<p>타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.</p> + +<h4 id="중첩된_타임아웃이_4ms_이하일_경우">중첩된 타임아웃이 4ms 이하일 경우</h4> + +<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">역사적으로</a> 브라우저들은 <code>setTimeout()</code> "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 <code>setTimeout() 호출은</code> 최소 지연을 사용하도록 강제됩니다.</p> + +<p>실제로, 4ms는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 스펙에 명시되어 있고</a> 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.</p> + +<p>최신 브라우저에서 0ms 타임아웃을 구현하려면, <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">이곳에 설명된</a> {{domxref("window.postMessage()")}}를 사용할 수 있습니다.</p> + +<h4 id="비활성_탭에서_타임아웃이1000ms에_여러_번_일어날_경우">비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우</h4> + +<p>부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.</p> + +<p>Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는 <span class="comment-copy"><code>dom.min_background_timeout_value</code> 설정을 통해 수정할 수 있습니다)</span><br> + Chrome은 11버전부터 구현했습니다 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p> + +<p>Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.</p> + +<h4 id="타임아웃_지연">타임아웃 지연</h4> + +<p>"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.</p> + +<h3 id="최대_지연_값">최대 지연 값</h3> + +<p>Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.</p> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>사양</th> + <th>상태</th> + <th>주석</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition (DOM Level 0)</td> + </tr> + </tbody> +</table> + +<h2 id="지원_브라우저">지원 브라우저</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>기본</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Callback 매개변수 지원<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>기본</td> + <td>1.0</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Callback 매개변수 지원<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 첫번째 form에서 매개변수를 지원하는지에 대한 여부.</p> + +<h2 id="더_알아보기">더 알아보기</h2> + +<ul> + <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li> + <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li> + <li>{{domxref("WindowTimers.clearTimeout")}}</li> + <li>{{domxref("WindowTimers.setInterval")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> |