javascript - 使用 requestAnimationFrame 的错误行为

Question

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

前段时间，我用 requestAnimationFrame 替换(接受 Pull Request)setTimeout 调用，以加速现代浏览器中的动画，同时使用提供的 polyfill作者:Paul Irish。

现在，当我尝试以非常低的延迟为多个 path 设置动画时，我正在尝试使用 requestAnimationFrame 调用进行错误行为。

我准备了 2 个演示来展示 setTimeout(正常工作)和 requestAnimationFrame(错误行为)的行为。请检查:

• setTimeout Demo
• requestAnimationFrame Demo

在 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 的返回值被保存到同一个变量中。将它们保存在不同的变量中将解决这个问题。

这是一个代码笔

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