无法使用cancelAnimationFrame。什么都没发生(铬)

时间:2015-10-10 12:49:07

标签: javascript

问题:我无法使用chromes识别的cancelAnimationFrame取消requestAnimationFrame。

我尝试了什么:我使用了console.log但没有显示错误。我控制台。记录了cancelAnimationFrame,我得到了未定义,而请求对应的日志很好。我还尝试了不同版本的cancelAnimationFrame,包括前缀版本:

cancelAnimationFrame
webkitCancelAnimationFrame
window.cancelAnimationFrame etc..

我也尝试将取消代码放入函数中,但正如预期的那样并不重要。

问题:为什么我不能停止requestAnimationFrame?是否按照我推荐的方式取消它?

http://jsfiddle.net/p8hv15j4/2/

var elem = document.getElementById('test');
var currentPos = 0;

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;

function fn() {
    currentPos += 5;

    elem.style.left = currentPos + "px";

    if (Math.abs(currentPos) >= 900) {
        currentPos = -500;
    }
        requestAnimationFrame(fn);
}
fn();

setTimeout(function() {
     cancelAnimationFrame(fn);
   }, 1000)

1 个答案:

答案 0 :(得分:1)

requestAnimationFrame会返回一个ID,这是您需要传递给cancelAnimationFrame的内容。

实际上,它的工作方式与set/clearTimeout完全相同 - 设置它会返回一个标识符,并取消标识符。