Buggy behavior using requestAnimationFrame
<p>I've wrote a useful library to draw and animate the stroke of SVG paths: segment. You can <a href="https://github.com/lmgonzalves/segment" rel="nofollow">check it on github</a>.</p>

<p>Some time ago I've replaced (accepting a Pull Request) the <code>setTimeout</code> calls with <code>requestAnimationFrame</code>, to speed up the animation in modern browsers, also using the <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/" rel="nofollow">polyfill</a> provided by Paul Irish.</p>

<p>Now I'm experimenting a buggy behavior with <code>requestAnimationFrame</code> calls when I tried to animate multiple <code>paths</code> with a very low delay among them.</p>

<p>I've prepared 2 demos to show the behavior with both <code>setTimeout</code> (working properly) and <code>requestAnimationFrame</code> (buggy behavior). Check it please:</p>

<ul>
<li><a href="https://jsfiddle.net/lmgonzalves/orvtzk5t/1/" rel="nofollow"><code>setTimeout</code> Demo</a></li>
<li><a href="https://jsfiddle.net/lmgonzalves/gjpx0s9L/2/" rel="nofollow"><code>requestAnimationFrame</code> Demo</a></li>
</ul>

<p>In the <code>requestAnimationFrame</code> Demo, I've modified a bit my library to print in the console some useful info, where you can see the buggy behavior:</p>

<pre><code>(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
})();
</code></pre>

<p>According to the previous code, after every 'calc call' message should appear a 'calc' message. But that is not what I can see, at least in Firefox and Chrome. This is the console output most of times:</p>

<pre><code>calc
calc call
calc
calc call
</code></pre>

<p>I really have no idea what's going on, so any help is welcome :)</p>