---
title: requestIdleCallback
slug: Web/API/Window/requestIdleCallback
tags:
  - Idle
  - requestAnimationFrame
  - requestIdleCallback
  - setTimeout
  - 性能优化
translation_of: Web/API/Window/requestIdleCallback
---
<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>

<p><strong><code>window.requestIdleCallback()</code></strong>方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间<code>timeout</code>，则有可能为了在超时前执行函数而打乱执行顺序。</p>

<p>你可以在<span title="idle">空闲</span>回调函数中调用<code><strong>requestIdleCallback()</strong></code>，以便在下一次通过事件循环之前调度另一个回调。</p>

<div class="blockIndicator note">
<p>强烈建议使用<code>timeout</code>选项进行必要的工作，否则可能会在触发回调之前经过几秒钟。</p>
</div>

<h2 id="语法">语法</h2>

<pre class="syntaxbox"><code>var handle = window.requestIdleCallback(callback[, options])</code></pre>

<h3 id="返回值">返回值</h3>

<p>一个ID，可以把它传入 {{domxref("Window.cancelIdleCallback()")}} 方法来结束回调。</p>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 {{domxref("IdleDeadline")}} 的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。</dd>
 <dt><code>options</code> {{optional_inline}}</dt>
 <dd>包括可选的配置参数。具有如下属性：
 <ul>
  <li><code>timeout</code>：如果指定了timeout并具有一个正值，并且尚未通过超时毫秒数调用回调，那么回调会在下一次空闲时期被强制执行，尽管这样很可能会对性能造成负面影响。</li>
 </ul>
 </dd>
</dl>

<h2 id="Example" name="Example">Example</h2>

<p>See our <a href="/zh-CN/docs/Web/API/Background_Tasks_API#Example">complete example</a> in the article <a href="/zh-CN/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p>

<h2 id="规范">规范</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="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Window.requestIdleCallback")}}</p>

<h2 id="查看更多">查看更多</h2>

<ul>
 <li>{{domxref("window.cancelIdleCallback()")}}</li>
 <li>{{domxref("IdleDeadline")}}</li>
 <li>{{domxref("window.setTimeout()")}}</li>
 <li>{{domxref("window.setInterval()")}}</li>
 <li>{{domxref("window.requestAnimationFrame")}}</li>
</ul>