DedicatedWorkerGlobalScope: cancelAnimationFrame()-Methode

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Die cancelAnimationFrame()-Methode der DedicatedWorkerGlobalScope-Schnittstelle storniert eine Animationsrahmenanforderung, die zuvor durch einen Aufruf von requestAnimationFrame() geplant wurde.

Der Aufruf der cancelAnimationFrame()-Methode erfordert, dass der aktuelle Worker ein zugehöriges Eigentümer-window hat. Das bedeutet, dass der aktuelle Worker von window oder von einem dedizierten Worker erstellt werden muss, der ebenfalls ein zugehöriges Eigentümer-window hat.

Syntax

js
cancelAnimationFrame(handle)

Parameter

handle

Der ID-Wert, der durch einen Aufruf von requestAnimationFrame() zurückgegeben wird; der Aufruf muss im selben Worker erfolgt sein.

Rückgabewert

Keiner (undefined).

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn die Methode vom aktuellen Worker nicht unterstützt wird.

Beispiele

Im Hauptthread beginnen wir mit der Übergabe der Kontrolle eines <canvas>-Elements an ein OffscreenCanvas, indem wir HTMLCanvasElement.transferControlToOffscreen() verwenden und eine Nachricht senden, um die Arbeit mit dem Offscreen-Canvas zu "start"en:

js
const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);

Beim Empfang der "start"-Nachricht beginnt der Worker mit der Animation und bewegt das Rechteck von links nach rechts. Beim Empfang einer "stop"-Nachricht wird die Animation gestoppt.

js
let ctx;
let pos = 0;

function draw(dt) {
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 10 * dt;
  self.requestAnimationFrame(draw);
}

self.addEventListener("message", (e) => {
  if (e.data.type === "start") {
    const transferredCanvas = e.data.canvas;
    ctx = transferredCanvas.getContext("2d");
    self.requestAnimationFrame(draw);
  }
  if (e.data.type === "stop") {
    self.cancelAnimationFrame(handle);
  }
});

Schließlich kann der Hauptthread bei Bedarf eine "stop"-Nachricht an den Worker senden, um die Animation zu stoppen:

js
worker.postMessage({
  type: "stop",
});

Spezifikationen

Specification
HTML Standard
# animationframeprovider-cancelanimationframe

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch