Signatur
Beschreibung
Der Konstruktor TaskController() gehört zur Prioritized Task Scheduling API. Er erzeugt einen Controller, dessen Eigenschaft signal ein TaskSignal enthält. Dieses Signal übergibst du an scheduler.postTask(). Damit kannst du Aufgaben später steuern.
TaskController erbt von AbortController. Du kannst also wie gewohnt abort() aufrufen, um alle verknüpften Aufgaben abzubrechen, die noch nicht ausgeführt wurden. Zusätzlich gibt es setPriority(): Damit änderst du die Priorität aller Aufgaben, die an dasselbe Signal gebunden sind, auch nachträglich. Das Signal löst dann das Ereignis prioritychange aus.
Über das optionale Objekt options legst du die Anfangspriorität fest. Möglich sind "user-blocking", "user-visible" (Standard) und "background". Ein Controller eignet sich besonders dann, wenn mehrere zusammengehörige Aufgaben gemeinsam abgebrochen oder umpriorisiert werden sollen. Ein Beispiel ist das Vorladen von Daten, das wichtiger wird, sobald der Nutzer mit einem Element interagiert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $options | object | {} | Optionales Konfigurationsobjekt. |
| $options.priority | "user-blocking" | "user-visible" | "background" | "user-visible" | Anfangspriorität des zugehörigen TaskSignal. Ein ungültiger Wert löst einen TypeError aus. |
Rückgabewert
TaskController. Seine Eigenschaft signal ist ein TaskSignal mit der angegebenen Priorität.Beispiele
Controller erzeugen und Priorität prüfen
const controller = new TaskController({ priority: 'background' });
console.log(controller.signal.priority);
console.log(controller.signal.aborted);
const standard = new TaskController();
console.log(standard.signal.priority);Hintergrundaufgabe bei Interaktion höher priorisieren
const controller = new TaskController({ priority: 'background' });
controller.signal.addEventListener('prioritychange', (event) => {
console.log(`Priorität: ${event.previousPriority} → ${event.target.priority}`);
});
const task = scheduler.postTask(() => {
// z. B. Daten für eine Detailansicht vorbereiten
return 'Vorschau berechnet';
}, { signal: controller.signal });
// Nutzer fährt mit der Maus über den Link → dringender machen
document.querySelector('#details')?.addEventListener('pointerenter', () => {
controller.setPriority('user-blocking');
}, { once: true });
console.log(await task);Mehrere Aufgaben gemeinsam abbrechen
const controller = new TaskController();
const tasks = [1, 2, 3].map((n) =>
scheduler.postTask(() => `Aufgabe ${n}`, { signal: controller.signal })
);
// Bevor die Aufgaben laufen: alles abbrechen
controller.abort();
const results = await Promise.allSettled(tasks);
results.forEach((r) => console.log(r.status, r.reason?.name));Mit Feature-Erkennung und Fallback
const runLowPriority = (fn) => {
if ('scheduler' in globalThis && 'TaskController' in globalThis) {
const controller = new TaskController({ priority: 'background' });
return {
result: scheduler.postTask(fn, { signal: controller.signal }),
cancel: () => controller.abort()
};
}
// Fallback für Browser ohne Unterstützung
let id;
const result = new Promise((resolve) => { id = setTimeout(() => resolve(fn()), 0); });
return { result, cancel: () => clearTimeout(id) };
};
const job = runLowPriority(() => 42);
console.log(await job.result);// Wichtig · Fallstricke
- Browser-Unterstützung: Chromium-Browser unterstützen die API ab Version 94, Firefox erst seit neueren Versionen. Safari unterstützt sie nicht. Prüfe deshalb immer mit
'TaskController' in globalThisund sieh einen Fallback vor. Die API ist auch in Web Workern verfügbar. - Ein ungültiger Wert für
prioritylöst beim Konstruktor einenTypeErroraus. BeisetPriority()ist es ebenfalls einTypeError. setPriority()aus einemprioritychange-Handler desselben Signals heraus aufzurufen, löst einenNotAllowedErroraus.abort()bricht nur Aufgaben ab, die noch nicht gestartet sind. Eine laufende synchrone Aufgabe wird nicht unterbrochen. Das Promise einer abgebrochenen Aufgabe wird mit einemAbortError(bzw. dem übergebenen Grund) abgelehnt. Fange diesen Fehler ab, sonst erscheinen unbehandelte Ablehnungen.- Wenn du keinen Controller brauchst, reicht
scheduler.postTask(fn, { priority }). Die Priorität ist dann allerdings fest und lässt sich später nicht mehr ändern. - Ein abgebrochener Controller lässt sich nicht zurücksetzen. Für neue Aufgaben musst du einen neuen Controller erzeugen.