diff options
Diffstat (limited to 'files/ko/web/api/settimeout')
| -rw-r--r-- | files/ko/web/api/settimeout/index.html | 363 | ||||
| -rw-r--r-- | files/ko/web/api/settimeout/index.md | 333 |
2 files changed, 333 insertions, 363 deletions
diff --git a/files/ko/web/api/settimeout/index.html b/files/ko/web/api/settimeout/index.html deleted file mode 100644 index d093696bd0..0000000000 --- a/files/ko/web/api/settimeout/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/setTimeout -tags: - - setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout -original_slug: 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>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</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> diff --git a/files/ko/web/api/settimeout/index.md b/files/ko/web/api/settimeout/index.md new file mode 100644 index 0000000000..bbbe53b4d3 --- /dev/null +++ b/files/ko/web/api/settimeout/index.md @@ -0,0 +1,333 @@ +--- +title: setTimeout() +slug: Web/API/setTimeout +tags: + - API + - HTML DOM + - Intervals + - JavaScript timers + - MakeBrowserAgnostic + - Method + - NeedsMarkupWork + - Reference + - Timers + - setTimeout + - Polyfill +browser-compat: api.setTimeout +translation_of: Web/API/setTimeout +--- +{{APIRef("HTML DOM")}} + +전역 **`setTimeout()`** 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. + +## 구문 + +```js +var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); +var timeoutID = setTimeout(function[, delay]); +var timeoutID = setTimeout(code[, delay]); +``` +### 매개변수 + +- `function` + - : 타이머가 만료된 뒤 실행할 {{jsxref("function")}}입니다. +- `code` + - : 함수 대신 문자열을 지정하는 대체 구문으로, 타이머가 만료될 때 코드로 컴파일 후 실행합니다. {{jsxref("Global_Objects/eval", "eval()")}}이 보안 취약점인 것과 같은 이유로 **사용을 권장하지 않습니다**. +- `delay` {{optional_inline}} + - : 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간입니다. 생략하거나 0을 지정할 경우 "즉시", 더 정확히는 다음 이벤트 사이클에 실행한다는 뜻입니다. 그러나 실제 딜레이는 의도했던 것보다 더 길 수 있습니다. 아래의 [딜레이가 지정한 값보다 더 긴 이유](#딜레이가_지정한_값보다_더_긴_이유)를 참고하세요. +- `arg1, ..., argN` {{optional_inline}} + - : `function`에 전달할 추가 매개변수입니다. + +### 반환 값 + +반환하는 `timeoutID`는 양의 정수로서 `setTimeout()`이 생성한 타이머를 식별할 때 사용합니다. 이 값을 {{domxref("clearTimeout()")}}에 전달하면 타이머를 취소할 수 있습니다. + +같은 객체({{domxref("window")}}, 워커 등)에서 반복해 호출하는 `setTimeout()` 또는 {{domxref("setInterval()")}} 메서드는 절대 같은 `timeoutID`를 사용하지 않습니다. 그러나 다른 객체끼리는 다른 ID 풀을 사용합니다. + +## 설명 + +{{domxref("clearTimeout()")}}으로 타이머를 취소할 수 있습니다. + +어떤 함수를 몇 밀리초마다 반복적으로 호출해야 할 필요가 있으면 {{domxref("setInterval()")}}을 사용하세요. + +### 비동기 함수로 작업하기 + +`setTimeout()`은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않습니다. 달리 말하자면, `setTimeout()`을 사용해서 다음 함수 호출을 "일시정지" 할 수는 없습니다. + +다음 예제를 살펴보세요. + +```js +setTimeout(() => {console.log("첫 번째 메시지")}, 5000); +setTimeout(() => {console.log("두 번째 메시지")}, 3000); +setTimeout(() => {console.log("세 번째 메시지")}, 1000); + +// 콘솔 출력: + +// 세 번째 메시지 +// 두 번째 메시지 +// 첫 번째 메시지 +``` + +첫 번째 `setTimeout()` 호출이 두 번째 호출 전에 5초의 "정지" 구간을 만들지 않음에 주의하세요. 그 대신, 위 코드는 첫 함수 실행을 5초간 대기하는 동시에 두 번째 함수 실행을 3초간 대기하고, 다시 동시에 세 번째 함수의 실행도 1초간 대기합니다. 그 후 1초가 지나면 첫 함수와 두 번째 함수 모두 아직 타이머가 끝나지 않았기 때문에 세 번째 함수 먼저 실행됩니다. 그 후에 두 번째, 그리고 마지막으로 첫 번째 함수가 각자의 타이머 만료 후 실행됩니다. + +함수의 실행이 완료된 후에 다른 함수를 호출하는 구조가 필요하면 [프로미스](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) 문서를 살펴보세요. + +### "this" 문제 + +`setTimeout()`에 메서드를 지정할 경우, 내부의 `this` 값이 예상과 다를 수도 있습니다. 이 문제에 대한 일반적인 설명은 [JavaScript +참고서](/ko/docs/Web/JavaScript/Reference/Operators/this#객체의_메서드로서)가 자세히 설명합니다. + +`setTimeout()`이 실행하는 코드는 `setTimeout()`을 호출했던 함수와는 다른 실행 맥락에서 호출됩니다. 호출 함수의 `this` 키워드 값을 설정하는 일반적인 규칙이 여기서도 적용되며, `this`를 호출 시 지정하지도 않았고 `bind`로 바인딩하지도 않은 경우 기본 값인 `window` (또는 `global`) 객체를 가리키게 됩니다. 따라서 `setTimeout()`을 호출한 함수의 `this` 값과는 다르게 되는 것입니다. + +다음 코드를 살펴보세요. + +```js +const myArray = ['zero', 'one', 'two']; +myArray.myMethod = function (sProperty) { + console.log(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // "zero,one,two" 기록 +myArray.myMethod(1); // "one" 기록 +``` + +위의 코드는 `myMethod`를 호출할 때, 호출로 인해 `this`가 `myArray`로 설정되기 때문에 정상적으로 동작합니다. `this[sProperty]`가 `myArray[sProperty]`와 동일함을 확인하세요. 그러나, 다음의 코드도 살펴보세요. + +```js +setTimeout(myArray.myMethod, 1.0*1000); // 1초 후 "[object Window]" 기록 +setTimeout(myArray.myMethod, 1.5*1000, '1'); // 1.5초 후 "undefined" 기록 +``` + +`myArray.myMethod`를 `setTimeout`에 전달했고, 타이머 만료 후 호출 시점에 `this`가 따로 설정되지 않으므로 기본 값인 `window` 객체를 가리키게 돼 정상적인 동작을 하지 않습니다. + +{{jsxref("Array.forEach()", "forEach()")}}와 {{jsxref("Array.reduce()", "reduce()")}} 등 {{jsxref("Array")}}의 메서드와는 달리 `setTimeout()`에는 `thisArg`를 설정할 수 있는 방법 또한 존재하지 않습니다. 그리고 `call`을 사용해 `this`를 설정하는 것 역시 작동하지 않습니다. + +```js +setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // 오류 +setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // 같은 오류 +``` + +#### 해결법 + +##### 함수 감싸기 + +이 문제를 해결할 때 자주 사용하는 방법 중 하나는 `this`를 설정할 수 있도록 함수를 다른 함수로 감싸는 것입니다. + +```js +setTimeout(function(){myArray.myMethod()}, 2.0*1000); // 2초 후 "zero,one,two" 기록 +setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // 2.5초 후 "one" 기록 +``` + +화살표 함수로 감쌀 수도 있습니다. + +```js +setTimeout(() => {myArray.myMethod()}, 2.0*1000); // 2초 후 "zero,one,two" 기록 +setTimeout(() => {myArray.myMethod('1')}, 2.5*1000); // 2.5초 후 "one" 기록 +``` + +##### bind() 사용하기 + +다른 방법으로는 {{jsxref("Function.bind()", "bind()")}}를 사용해서 주어진 함수의 모든 호출에서 `this` 값을 설정하는 것입니다. + +```js +const myArray = ['zero', 'one', 'two']; +const myBoundMethod = (function (sProperty) { + console.log(arguments.length > 0 ? this[sProperty] : this); +}).bind(myArray); + +myBoundMethod(); // "zero,one,two" 기록, this가 myArray에 바인딩됐기 때문 +myBoundMethod(1); // "one" 기록 +setTimeout(myBoundMethod, 1.0*1000); // 1초 후, 바인딩으로 인해 여전히 "zero,one,two" 기록 +setTimeout(myBoundMethod, 1.5*1000, "1"); // 1.5초 후 "one" 기록 +``` + +### 문자열 리터럴 지정하기 + +`setTimeout()`에 함수 대신 문자열을 지정하는 것은 [`eval()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)을 사용하는 것과 같은 문제를 가집니다. + +```js example-bad +// 하지 마세요 +setTimeout("console.log('Hello World!');", 500); +``` + +```js example-good +// 이렇게 사용하세요 +setTimeout(function() { + console.log('Hello World!'); +}, 500); +``` + +`setTimeout()`에 전달한 문자열은 전역 맥락에서 평가되므로, `setTimeout()` 호출 시점에 접근 가능했던 로컬 심볼은 문자열 평가 시점에서는 접근 불가능합니다. + +### 딜레이가 지정한 값보다 더 긴 이유 + +지정한 타임아웃 값보다 실행에 긴 시간이 걸리는 이유에는 여러가지가 있습니다. 여기서는 가장 흔한 상황을 설명하겠습니다. + +#### 중첩 타임아웃 + +[HTML 표준](https://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers)에 명시된 것과 같이, 브라우저는 `setTimeout` 호출이 5번 이상 중첩된 경우 4ms의 최소 타임아웃을 강제합니다. + +다음 예제에서 이 동작을 확인할 수 있습니다. 딜레이로 `0`을 지정한 `setTimeout`을 여러 번 중첩하고, 각각의 콜백이 실제로 호출되기까지의 딜레이를 기록하는데, 첫 네 번 까지는 대략 0ms에 근접하지만, 그 이후로는 4ms에 근접함을 볼 수 있습니다. + +```html +<button id="run">시작</button> +<pre>이전 현재 실제 딜레이</pre> +<div id="log"></div> +``` + +```js +let last = 0; +let iterations = 10; + +function timeout() { + // log the time of this call + logline(new Date().getMilliseconds()); + + // if we are not finished, schedule the next call + if (iterations-- > 0) { + setTimeout(timeout, 0); + } +} + +function run() { + // clear the log + const log = document.querySelector("#log"); + while (log.lastElementChild) { + log.removeChild(log.lastElementChild); + } + + // initialize iteration count and the starting timestamp + iterations = 10; + last = new Date().getMilliseconds(); + + // start timer + setTimeout(timeout, 0); +} + +function pad(number) { + return number.toString().padStart(3, "0"); +} + +function logline(now) { + // log the last timestamp, the new timestamp, and the difference + const newLine = document.createElement("pre"); + newLine.textContent = `${pad(last)} ${pad(now)} ${now - last}`; + document.getElementById("log").appendChild(newLine); + last = now; +} + +document.querySelector("#run").addEventListener("click", run); +``` + +{{EmbedLiveSample("중첩_타임아웃", 100, 420)}} + +#### 비활성 탭의 타임아웃 + +백그라운드 탭으로 인한 부하(와 그로 인한 배터리 사용량)를 경감하기 위해, 브라우저는 비활성 탭에서의 최소 딜레이에 최소 값을 강제합니다. 또한 Web Audio API {{domxref("AudioContext")}}를 사용해 소리를 재생 중일 땐 이 최소 값 정책이 면제될 수도 있습니다. + +정확한 동작은 브라우저에 따라 다릅니다. + +- Firefox Desktop과 Chrome 모두 비활성 탭에 최소 1초의 타임아웃을 강제합니다. +- Firefox Android에서는 15분의 최소 타임아웃이 존재하고, 탭 전체를 언로드하는 경우도 있습니다. +- Firefox는 비활성 탭이 {{domxref("AudioContext")}}를 포함하는 경우 최소 타임아웃을 강제하지 않습니다. + +#### 추적 스크립트 스로틀링 + +Firefox는 추적 스크립트로 인식한 스크립트에 대해 추가 스로틀링을 적용합니다. 전역 탭의 경우 스로틀링의 최소 딜레이는 여전히 4ms지만, 백그라운드 탭에서는 페이지의 첫 로드 이후 30초가 지나면 10,000ms, 또는 10초의 스로틀링을 적용합니다. + +[추적 방어](https://wiki.mozilla.org/Security/Tracking_protection) 문서에서 자세한 정보를 알아보세요. + +#### 늦은 타임아웃 + +페이지, 운영체제, 브라우저가 다른 작업으로 인해 바쁠 경우 타임아웃이 예쌍보다 늦게 실행될 수 있습니다. 한 가지 중요한 점은, `setTimeout()`을 호출한 스레드가 종료되기 전에는 지정한 함수 또는 코드 조각을 실행할 수 없다는 것입니다. + +```js +function foo() { + console.log('foo 호출'); +} +setTimeout(foo, 0); +console.log('setTimeout 완료'); +``` + +위 코드의 콘솔 기록 결과는 다음과 같습니다. + +``` +setTimeout 완료 +foo 호출 +``` + +이렇게 되는 이유는, `setTimeout`을 0의 딜레이로 호출하기는 했으나, 이는 지정한 함수를 대기열에 넣고 가능한 바로 다음 기회에 실행하라는 것과 같으며 즉시 호출하라는 것은 아니기 때문입니다. 대기열의 함수를 실행하려면 현재 실행 중인 코드가 반드시 먼저 완료돼야 하므로, 실제 실행 결과는 예상하던 것과 다를 수 있습니다. + +#### 페이지 로드 중 타임아웃 지연 + +Firefox는 현재 탭이 로딩 중일 땐 `setTimeout()` 타이머 실행을 지연시킵니다. 실제 실행은 메인 스레드가 대기 상태에 들어가기 전까지({{domxref("window.requestIdleCallback()")}}과 비슷), 또는 `load` 이벤트가 발생하기 전까지 미뤄집니다. + +### WebExtension 백그라운드 페이지와 타이머 + +[WebExtensions](/ko/docs/Mozilla/Add-ons/WebExtensions)에서는 `setTimeout()`을 신뢰할 수 없습니다. 확장 개발자는 `setTimeout()` 대신 [`alarms`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/alarms) API를 사용해야 합니다. + +### 최대 딜레이 + +Internet Explorer, Chrome, Safari, Firefox를 포함한 브라우저는 딜레이를 내부적으로 32비트 부호 있는 정수 값으로 저장합니다. 따라서 2,147,483,647ms(약 24.8일)보다 큰 값을 지정하면 정수 오버플로가 발생해서 타이머가 즉시 만료됩니다. + +## 예제 + +### 타임아웃 설정 및 해제 + +다음 예제는 웹 페이지에 두 개의 간단한 버튼을 추가하고, 각각 `setTimeout()`과 `clearTimeout()`을 실행하도록 합니다. 첫 번째 버튼을 누르면 2초 뒤 메시지가 나타나는 타이머를 설정하고, `clearTimeout()`에서 사용할 수 있는 타임아웃 ID를 저장합니다. 두 번째 버튼을 누르면 첫 번째 버튼으로 설정한 타이머를 해제할 수 있습니다. + +#### HTML + +```html +<button onclick="delayedMessage();">2초 뒤 메시지 표시</button> +<button onclick="clearMessage();">메시지가 나타나기 전에 취소</button> + +<div id="output"></div> +``` + +#### JavaScript + +```js +let timeoutID; + +function setOutput(outputContent) { + document.querySelector('#output').textContent = outputContent; +} + +function delayedMessage() { + setOutput(''); + timeoutID = setTimeout(setOutput, 2*1000, '너무 느려요!'); +} + +function clearMessage() { + clearTimeout(timeoutID); +} +``` + +```css hidden +#output { + padding: .5rem 0; +} +``` + +#### 결과 + +{{EmbedLiveSample('타임아웃_설정_및_해제')}} + +[`clearTimeout()` 예제](/ko/docs/Web/API/clearTimeout#example)도 확인해보세요. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- `core-js`의 [콜백 매개변수 지원 폴리필](https://github.com/zloirock/core-js#settimeout-and-setinterval) +- {{domxref("clearTimeout")}} +- {{domxref("setInterval()")}} +- {{domxref("window.requestAnimationFrame")}} +- {{domxref("queueMicrotask()")}} |