DedicatedWorkerGlobalScope：cancelAnimationFrame() 方法

基线 2023

新可用

自 2023 年 3 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

注意：此功能仅在专用 Web 工作线程中可用。

cancelAnimationFrame() 方法是 DedicatedWorkerGlobalScope 接口的方法，用于取消之前通过调用 requestAnimationFrame() 调度的动画帧请求。

调用 cancelAnimationFrame() 方法需要当前工作线程具有关联的所有者 window。这意味着当前工作线程必须由 window 或由也具有关联所有者 window 的专用工作线程创建。

语法

js
cancelAnimationFrame(handle)

参数

handle

由对 requestAnimationFrame() 的调用返回的 ID 值；该调用必须在同一工作线程中进行。

返回值

无（undefined）。

异常

NotSupportedError DOMException

如果当前工作线程不支持该方法，则抛出此异常。

示例

在主线程中，我们首先通过使用 HTMLCanvasElement.transferControlToOffscreen() 将 <canvas> 元素的控制权转移到 OffscreenCanvas，并向工作线程发送一条消息“start”，以开始其工作，并附带离屏画布。

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

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

收到“start”消息后，工作线程开始动画，将矩形从左向右移动。收到“stop”消息后，它将停止动画。

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);
  }
});

最后，如果需要，主线程可以向工作线程发送“stop”消息以停止动画。

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

规范

规范
HTML 标准
# animationframeprovider-cancelanimationframe

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅