window.cancelAnimationFrame

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.

window.cancelAnimationFrame() æ¹æ³åæ¶ä¸ä¸ªååéè¿è°ç¨ window.requestAnimationFrame() æ¹æ³æ·»å å°è®¡åä¸çå¨ç»å¸§è¯·æ±ã

è¯æ³

cancelAnimationFrame(requestID)

åæ°

requestID: ååè°ç¨ window.requestAnimationFrame() æ¹æ³æ¶è¿åç IDã

è¿åå¼

æ ï¼undefinedï¼ã

ç¤ºä¾

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