Question

我写了一个有用的库来绘制和动画SVG路径的笔画：段。你可以check it on github。

前段时间我使用setTimeout替换{接受拉取请求'requestAnimationFrame来电，以加速现代浏览器中的动画，同时使用保罗提供的polyfill爱尔兰。

现在，当我尝试为多个requestAnimationFrame设置动画时，我正在尝试使用paths次调用的错误行为。

我准备了2个演示，以显示setTimeout（正常工作）和requestAnimationFrame（错误行为）的行为。请检查：

在requestAnimationFrame演示中，我修改了一下我的库，在控制台中打印了一些有用的信息，在那里你可以看到错误的行为：

(function calc(){
    // Checking if it's the first element, the buggy behavior happens in the firsts elements
    if(that.class === 'first'){
        console.log('calc');
    }

    // Some code here that can break the recursive loop and stop execution of calc function

    if(that.class === 'first'){
        console.log('calc call');
    }
    that.timer = window.requestAnimationFrame(calc);

    // More code here
})();

根据前面的代码，每次'calc call'消息后都应出现'calc'消息。但这不是我能看到的，至少在Firefox和Chrome中是这样。这是控制台输出的大部分时间：

calc
calc call
calc
calc call

我真的不知道发生了什么，所以欢迎任何帮助：）

Answer 1

这里的错误行为是由于timeoutID和requestAnimationFrame的返回值都被保存到同一个变量中而引起的。将它们保存在不同的变量中可以解决问题。

这是一个codepen

http://codepen.io/anon/pen/KzPboY?editors=0010

使用requestAnimationFrame的Buggy行为

1 个答案: