Fatal编程技术网
  • javascript/
  • Javascript 在设置的时间量后取消requestAnimationFrame

Javascript 在设置的时间量后取消requestAnimationFrame

javascript animation canvas

Javascript 在设置的时间量后取消requestAnimationFrame,javascript,animation,canvas,setinterval,requestanimationframe,Javascript,Animation,Canvas,Setinterval,Requestanimationframe,我有以下JavaScript： function animate() { // call other function offset += 3; if (offset > 15) offset = 0; /// make the animation loop loop var request = requestAnimationFrame(animate); } 然后在我的HTML中： <body onload="animate()" > 这一切都很好，它保持动画不

我有以下JavaScript：

function animate() {
// call other function

offset += 3;
if (offset > 15) offset = 0;

/// make the animation loop loop
var request = requestAnimationFrame(animate);
}
然后在我的HTML中：

<body onload="animate()" >
这一切都很好，它保持动画不断循环，这是伟大的。但我想弄清楚如何让这个动画运行4秒钟，然后停止

“调用其他函数”只是一条向下移动的线，然后重新设置自身，给人一种沿着一段道路移动的感觉。现在一切都是在画布上完成的

任何帮助都将不胜感激

您可以这样检查4000毫秒的运行时间：

var start = Date.now();

function animate() {

    if(Date.now()-start>4000){return;}

    requestAnimFrame(loop);

    // do stuff

};
这样，您可以在使用RAF调用下一个循环之前退出（因此无需取消）。

您可以使用
requestAnimationFrame
的参数，该参数以毫秒为单位，它将为您提供非常准确的时间：

function loop(elapsedTime) {

    if (elapsedTime >= 4000) return; /// break loop after 4 seconds

    requestAnimationFrame(loop);    /// provides elapsed time as arg. to loop
}

/// start loop with rAF to get a valid argument first time:
requestAnimationFrame(loop);
从：

回调方法传递一个参数，即 DOMHighResTimeStamp，指示时间，以毫秒为单位，但 最小精度为10µs，在该精度下计划重新喷漆 发生

Date.now（）
或
new Date（）
而不是
new Date.now（）
。（函数声明末尾不需要分号。）