Scheduling: isInputPending()-Methode
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die isInputPending()
-Methode des Scheduling
-Interfaces ermöglicht es Ihnen zu überprüfen, ob es ausstehende Eingabeereignisse in der Ereignis-Warteschlange gibt, was darauf hinweist, dass der Benutzer versucht, mit der Seite zu interagieren.
Diese Funktion kann in Situationen nützlich sein, in denen Sie eine Warteschlange von Aufgaben haben, die ausgeführt werden sollen, und regelmäßig dem Haupt-Thread Vorfahrt einräumen möchten, um die Benutzerinteraktion zu ermöglichen, damit die Anwendung so reaktionsschnell und leistungsfähig wie möglich bleibt. isInputPending()
ermöglicht es Ihnen, nur dann Vorfahrt zu gewähren, wenn Eingaben anstehen, anstatt dies in willkürlichen Intervallen zu tun.
Warnung:
Die isInputPending()
-Methode wurde durch Funktionen ersetzt, die im Scheduler
-Interface verfügbar sind, wie zum Beispiel yield()
, die besser zur Lösung von Planungsaufgaben entworfen wurden. Siehe Verwenden Sie isInputPending()
nicht für weitere Details.
isInputPending()
wird mit navigator.scheduling.isInputPending()
aufgerufen.
Syntax
isInputPending()
isInputPending(options)
Parameter
options
Optional-
Ein Objekt, das Optionen bereitstellt. Derzeit ist die einzige Option:
includeContinuous
Optional-
Ein boolescher Wert, der standardmäßig
false
ist. Wenn auftrue
gesetzt, wird dadurch angezeigt, dass kontinuierliche Ereignisse beim Überprüfen auf ausstehende Eingaben berücksichtigt werden sollten. Kontinuierliche Ereignisse sind vertrauenswürdige Ereignisse (vom Browser ausgelöste Ereignisse), die aufeinanderfolgend gefeuert werden, wiemousemove
,wheel
,touchmove
,drag
,pointermove
undpointerrawupdate
.
Rückgabewert
Ein boolescher Wert, der angibt, ob ausstehende Eingabeereignisse in der Ereignis-Warteschlange vorhanden sind (true
) oder nicht (false
).
Beispiele
Wir können isInputPending()
innerhalb einer Aufgabenlaufstruktur verwenden, um die yield()
-Funktion nur auszuführen, wenn der Benutzer versucht, mit der Seite zu interagieren:
function yield() {
return new Promise((resolve) => {
setTimeout(resolve, 0);
});
}
async function main() {
// Create an array of functions to run
const tasks = [a, b, c, d, e];
while (tasks.length > 0) {
// Yield to a pending user input
if (navigator.scheduling.isInputPending()) {
await yield();
} else {
// Shift the first task off the tasks array
const task = tasks.shift();
// Run the task
task();
}
}
}
Dies ermöglicht es Ihnen, den Haupt-Thread nicht zu blockieren, wenn der Benutzer aktiv mit der Seite interagiert, was möglicherweise ein reibungsloseres Benutzererlebnis bietet. Indem wir jedoch nur dann Vorfahrt gewähren, wenn dies erforderlich ist, können wir die aktuelle Aufgabe fortsetzen, wenn keine Benutzereingaben zu verarbeiten sind. Dies verhindert auch, dass Aufgaben in die Warteschlange hinter andere nicht wesentliche vom Browser initiierte Aufgaben gestellt werden, die nach der aktuellen Aufgabe geplant wurden.
Spezifikationen
Specification |
---|
Early detection of input events # dom-scheduling-isinputpending |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
Scheduler
-Interface- Prioritized Task Scheduling API
- Faster input events with Facebook's first browser API contribution auf engineering.fb.com (2019)
- Better JS scheduling with isInputPending() auf developer.chrome.com (2020)
- Optimierung langer Aufgaben auf web.dev (2022)