ProgressEvent: ProgressEvent() Konstruktor

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2016 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Der ProgressEvent() Konstruktor gibt ein neues ProgressEvent-Objekt zurück, das den aktuellen Fortschritt eines langwierigen Prozesses repräsentiert.

Syntax

new ProgressEvent(type)
new ProgressEvent(type, options)

Parameter

type

Ein String mit dem Namen des Ereignisses. Er ist groß-/klein-schreibungssensitiv und Browser setzen es auf loadstart, progress, abort, error, load, timeout oder loadend.

options Optional

Ein Objekt, das zusätzlich zu den in Event() definierten Eigenschaften die folgenden Eigenschaften haben kann:

lengthComputable Optional: Ein boolescher Wert, der angibt, ob die gesamte zu leistende Arbeit und der bereits geleistete Umfang des zugrunde liegenden Prozesses berechenbar sind. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht. Standardmäßig ist er auf false gesetzt.
loaded Optional: Eine Zahl, die die bereits geleistete Arbeit des zugrunde liegenden Prozesses darstellt. Bei einem vom Browser in HTTP-Nachrichten ausgelösten ProgressEvent bezieht sich der Wert auf die Größe des Nachrichtenkörpers in Bytes, ohne Berücksichtigung von Headern und anderem Overhead. In einem selbst erstellten ProgressEvent können Sie jeder loaded-Eigenschaft einen numerischen Wert zuweisen, der die Menge der im Verhältnis zum total-Wert geleisteten Arbeit darstellt. Standardmäßig ist er auf 0 gesetzt.
total Optional: Eine Zahl, die die Gesamtgröße der zu übertragenden oder zu verarbeitenden Daten angibt. Bei vom Browser in HTTP-Nachrichten ausgelösten ProgressEvents bezieht sich der Wert auf die Größe einer Ressource in Bytes und wird aus dem Content-Length-Antwortheader abgeleitet. In einem selbst erstellten ProgressEvent möchten Sie total eventuell auf einen Wert wie 100 oder 1 normalisieren, falls die genaue Anzahl von Bytes einer Ressource vertraulich ist. Wenn Sie beispielsweise 1 als Gesamtwert verwenden, sollte loaded ein Dezimalwert zwischen 0 und 1 sein. Standardmäßig ist er auf 0 gesetzt.

function updateProgress(loaded, total) {
  const progressEvent = new ProgressEvent("progress", {
    lengthComputable: true,
    loaded,
    total,
  });

  document.dispatchEvent(progressEvent);
}

document.addEventListener("progress", (event) => {
  console.log(`Progress: ${event.loaded}/${event.total}`);
});

updateProgress(50, 100);

Verwendung von Brüchen in einem ProgressEvent

Die Gesamtanzahl der Bytes einer Ressource könnte zu viele Informationen über einen Download preisgeben, daher kann stattdessen eine Zahl zwischen 0 und 1 verwendet werden:

function updateProgress(loaded, total) {
  const progressEvent = new ProgressEvent("progress", {
    lengthComputable: true,
    loaded,
    total,
  });

  document.dispatchEvent(progressEvent);
}

document.addEventListener("progress", (event) => {
  console.log(`Progress: ${event.loaded}/${event.total}`);
});

updateProgress(0.123456, 1);