blob: e691bf3f07271413de2702efde3b8119d4d9099d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
---
title: window.requestIdleCallback()
slug: Web/API/Window/requestIdleCallback
tags:
- API
- DOM
- DOM Reference
- JavaScript timers
- Method
- Reference
- Window
- requestIdleCallback
translation_of: Web/API/Window/requestIdleCallback
---
<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
<p><code><strong>window.requestIdleCallback()</strong></code> 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않고 메인 이벤트 루프에서 백그라운드 및 우선 순위가 낮은 작업을 수행 할 수 있습니다. 함수는 일반적으로 first-in-first-out(FIFO) 순서로 호출됩니다. 하지만, <code>timeout</code> 옵션이 지정된 callback은 제한 시간이 지나기 전에 이들을 실행하기 위해 순서에 맞지 않게 호출될 수 있습니다.</p>
<p>idle callback 안에서 <code>requestIdleCallback()</code> 을 호출하여 다음 패스가 이벤트 루프를 통과하는 즉시 다른 callback을 예약할 수 있습니다.</p>
<div class="note">필수적인 작업이라면 <code>timeout</code> 옵션을 사용하는 것을 강력히 권장합니다. 사용하지 않을 경우 callback이 실행되기전에 몇 초 이상 소요될 수 있습니다.</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
<h3 id="Returns" name="Returns">Return value</h3>
<p>실행 ID. {{domxref("window.cancelIdleCallback()")}} 메서드에 인자로 전달하여 callback 실행을 취소할 수 있습니다.</p>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
<dt><code>callback</code></dt>
<dd>이벤트 루프가 유휴 상태가 될 때 호출되어야 하는 함수. callback 함수는 {{domxref("IdleDeadline")}} 객체를 인자로 전달받습으며 이 객체를 통해 타임아웃 기간이 만료되어 callback이 실행되었는지 여부를 알 수 있습니다.</dd>
<dt><code>options</code> {{optional_inline}}</dt>
<dd>선택적으로 사용가능한 option 설정. 현재는 하나의 property만 정의 되어 있습니다 :
<ul>
<li><code>timeout</code>: 만약<code>timeout</code> 이 지정되어 있고 양수일 경우, <em>timeout</em> 밀리세컨드가 지날 때까지 callback이 실행되지 않았다면 성능상에 부정적인 영향을 미치는 위험이 있더라도 다음 idle 상태에 callback이 호출됩니다.</li>
</ul>
</dd>
</dl>
<h2 id="Example" name="Example">Example</h2>
<p><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a> 포스트의 <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> 예제를 참조해 주십시오.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
<tr>
<td>{{SpecName('Background Tasks')}}</td>
<td>{{Spec2('Background Tasks')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Window.requestIdleCallback")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("window.cancelIdleCallback()")}}</li>
<li>{{domxref("IdleDeadline")}}</li>
<li>{{domxref("window.setTimeout()")}}</li>
<li>{{domxref("window.setInterval()")}}</li>
</ul>
|
