Start · Sprachen · JavaScript · Referenz · Navigator.scheduling

Navigator.scheduling

Eigenschaft

Schreibgeschützte Eigenschaft, die ein <code>Scheduling</code>-Objekt liefert. Mit dessen Methode <code>isInputPending()</code> lässt sich prüfen, ob Benutzereingaben auf Verarbeitung warten.

seit JavaScript Experimentell: Chromium 87+ (Chrome, Edge, Opera); Kategorie: webapi

Signatur

get Navigator.scheduling

Beschreibung

navigator.scheduling gibt das Scheduling-Objekt des aktuellen Dokuments zurück. Dieses Objekt hat derzeit genau eine Methode: isInputPending(). Sie meldet, ob in der Ereigniswarteschlange Eingabeereignisse wie Klicks, Tastendrücke oder Touch-Ereignisse warten, die der Browser noch nicht an die Seite ausgeliefert hat.

Das ist bei lang laufenden JavaScript-Aufgaben nützlich, zum Beispiel beim Verarbeiten großer Datenmengen, beim Rendern langer Listen oder bei aufwendigen Berechnungen. Früher musste man solche Arbeit in feste Blöcke aufteilen und nach jedem Block pauschal über setTimeout() die Kontrolle an den Browser zurückgeben. Mit isInputPending() gibt man nur dann ab, wenn tatsächlich eine Eingabe wartet. So bleibt die Seite reaktionsschnell, und die Arbeit ist insgesamt schneller erledigt.

Die Eigenschaft ist schreibgeschützt und nimmt keine Parameter. Da sie nur in Chromium-basierten Browsern verfügbar ist, sollte man sie immer über Feature Detection nutzen, etwa mit 'scheduling' in navigator. Andere Browser brauchen einen Ersatzweg, zum Beispiel festes Abgeben nach einem Zeitbudget.

Rückgabewert

Typ
Scheduling
Beschreibung
Ein Scheduling-Objekt mit der Methode isInputPending(options). Die Methode gibt true zurück, wenn Eingabeereignisse warten, sonst false. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Unterstützung prüfen

const hatScheduling = 'scheduling' in navigator &&
  typeof navigator.scheduling.isInputPending === 'function';

console.log(hatScheduling
  ? 'isInputPending() verfügbar'
  : 'Nicht unterstützt – Ersatzweg verwenden');
isInputPending() verfügbar // in Chrome/Edge

Lange Aufgabe nur bei wartender Eingabe unterbrechen

const pause = () => new Promise((resolve) => setTimeout(resolve, 0));

const verarbeiteAlle = async (eintraege, verarbeite) => {
  const BUDGET_MS = 50; // Zeitbudget als Ersatzweg für andere Browser
  let start = performance.now();

  for (const eintrag of eintraege) {
    verarbeite(eintrag);

    const eingabeWartet = navigator.scheduling?.isInputPending?.() ?? false;
    const budgetAufgebraucht = performance.now() - start > BUDGET_MS;

    if (eingabeWartet || budgetAufgebraucht) {
      await pause(); // Kontrolle an den Browser zurückgeben
      start = performance.now();
    }
  }
};

const daten = Array.from({ length: 100_000 }, (_, i) => i);
let summe = 0;
verarbeiteAlle(daten, (n) => { summe += Math.sqrt(n); })
  .then(() => console.log('Fertig:', Math.round(summe)));
Fertig: 21081835

Kontinuierliche Ereignisse einbeziehen

// Standardmäßig werden mousemove/pointermove u. ä. ignoriert.
// Mit includeContinuous: true zählen sie ebenfalls.
const sollteAbgeben = () =>
  navigator.scheduling?.isInputPending({ includeContinuous: true }) ?? false;

document.addEventListener('pointermove', () => {});

setTimeout(() => {
  const ende = performance.now() + 2000;
  while (performance.now() < ende) {
    if (sollteAbgeben()) {
      console.log('Eingabe wartet – Schleife beenden');
      break;
    }
  }
}, 0);
Eingabe wartet – Schleife beenden // sobald die Maus bewegt wird

// Wichtig · Fallstricke

  • Kompatibilität: Die Funktion ist experimentell und nur in Chromium-Browsern ab Version 87 verfügbar. Firefox und Safari unterstützen sie nicht, deshalb immer Feature Detection und einen Ersatzweg einplanen.
  • Empfohlene Alternative: Das Chrome-Team empfiehlt inzwischen eher scheduler.yield() bzw. scheduler.postTask() (Prioritized Task Scheduling API). Denn isInputPending() berücksichtigt keine anderen wichtigen Arbeiten wie Rendering oder Netzwerk-Callbacks, sondern nur Eingaben.
  • isInputPending() gibt nur Auskunft. Es gibt die Kontrolle nicht selbst an den Browser zurück. Die Aufgabe muss man danach aktiv beenden oder pausieren, etwa mit await auf setTimeout oder scheduler.yield().
  • Die Methode kann auch false liefern, obwohl eine Eingabe wartet, zum Beispiel bei Ereignissen aus fremden Frames (Cross-Origin-iframes). Das verhindert, dass Informationen über andere Herkünfte nach außen dringen.
  • Die Eigenschaft ist nur im Fensterkontext verfügbar, nicht in Web Workern.