window.cancelAnimationFrame

window.cancelAnimationFrame() 方法取消一个先前通过调用 window.requestAnimationFrame() 方法添加到计划中的动画帧请求。

语法

js
cancelAnimationFrame(requestID)

参数

requestID

先前调用 window.requestAnimationFrame() 方法时返回的 ID。

返回值

无（undefined）。

示例

js
const requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

const cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

const start = Date.now();

let myReq;

function step(timestamp) {
  const progress = timestamp - start;
  d.style.left = `${Math.min(progress / 10, 200)}px`;
  if (progress < 2000) {
    // 在每次调用 requestAnimationFrame 时，注意更新 requestId
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);
// 取消操作使用的是最后一个 requestId
cancelAnimationFrame(myReq);

规范

Specification
HTML Standard
# animationframeprovider-cancelanimationframe

浏览器兼容性

BCD tables only load in the browser

参见