IdleDeadline.didTimeout — Eigenschaft · JavaScript-Referenz

Signatur

IdleDeadline.didTimeout

Beschreibung

Die Eigenschaft didTimeout des IdleDeadline-Objekts, das jedem Callback von window.requestIdleCallback() übergeben wird, verrät, warum der Callback gerade läuft. Ist der Wert true, hat der Browser keine Leerlaufphase gefunden, bevor die in der Option timeout festgelegte Zeit abgelaufen war. Der Callback wird dann zwangsweise ausgeführt, auch wenn der Hauptthread eigentlich beschäftigt ist.

In diesem Fall gibt deadline.timeRemaining() in der Regel 0 zurück. Eine Schleife wie while (deadline.timeRemaining() > 0) würde also gar keine Arbeit erledigen. Mit didTimeout erkennst du diese Lage und kannst trotzdem mindestens einen Teil der Aufgabe abarbeiten, etwa einen einzelnen Arbeitsschritt oder das Senden dringender Analysedaten.

Typische Einsatzfälle sind Hintergrundaufgaben, die zwar geringe Priorität haben, aber spätestens nach einer bestimmten Zeit erledigt sein müssen. Beispiele sind das Senden von Telemetrie, das Speichern von Entwürfen oder das Vorberechnen von Daten. Wurde bei requestIdleCallback() kein timeout angegeben, ist didTimeout immer false.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Callback wegen des abgelaufenen timeout ausgeführt wird. false, wenn er in einer echten Leerlaufphase läuft.

Beispiele

Grund für den Aufruf prüfen

requestIdleCallback((deadline) => {
  if (deadline.didTimeout) {
    console.log('Timeout erreicht – Arbeit wird erzwungen');
  } else {
    console.log(`Leerlauf: ${deadline.timeRemaining().toFixed(1)} ms verfügbar`);
  }
}, { timeout: 2000 });

Leerlauf: 49.8 ms verfügbar

Aufgaben-Warteschlange mit garantiertem Fortschritt

const tasks = Array.from({ length: 1000 }, (_, i) => () => Math.sqrt(i));

const processTasks = (deadline) => {
  // Normale Leerlaufzeit nutzen ODER nach Timeout mindestens eine Aufgabe erledigen
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
    tasks.shift()();
    if (deadline.didTimeout) break; // Bei Zwangsaufruf den Hauptthread nicht blockieren
  }

  if (tasks.length > 0) {
    requestIdleCallback(processTasks, { timeout: 1000 });
  } else {
    console.log('Alle Aufgaben erledigt');
  }
};

requestIdleCallback(processTasks, { timeout: 1000 });

Alle Aufgaben erledigt

Analysedaten spätestens nach 5 Sekunden senden

const queue = [{ event: 'page_view', ts: Date.now() }];

const flush = (deadline) => {
  if (queue.length === 0) return;
  const reason = deadline.didTimeout ? 'timeout' : 'idle';
  navigator.sendBeacon('/analytics', JSON.stringify({ reason, events: queue.splice(0) }));
  console.log(`Gesendet (Grund: ${reason})`);
};

requestIdleCallback(flush, { timeout: 5000 });

Gesendet (Grund: idle)

// Wichtig · Fallstricke

Nur mit timeout sinnvoll: Ohne die Option timeout ist didTimeout immer false.
Fallstrick timeRemaining(): Wenn didTimeout gleich true ist, liefert timeRemaining() meist 0. Eine Schleife, die nur timeRemaining() > 0 prüft, erledigt dann nichts. Prüfe deshalb zusätzlich didTimeout.
Performance: Ein Zwangsaufruf läuft, während der Hauptthread beschäftigt ist. Erledige dann nur kleine Arbeitsschritte, sonst ruckelt die Oberfläche.
Schreibgeschützt: Eine Zuweisung an didTimeout wird still ignoriert bzw. löst im Strict Mode einen TypeError aus.
Kompatibilität: Chromium-Browser und Firefox unterstützen die Eigenschaft, Safari standardmäßig nicht. Prüfe vorher mit 'requestIdleCallback' in window und nutze sonst einen Ersatz mit setTimeout.

Siehe auch

IdleDeadline IdleDeadline.timeRemaining() Window.requestIdleCallback() Window.cancelIdleCallback() Window.requestAnimationFrame() ImageTrack.repetitionCount TextTrackCue.endTime