---
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>