title: requestAnimationFrame seems slow, cancelAnimationFrame not working
body: <p><a href="http://jsfiddle.net/watson/cUSBQ/9/" rel="nofollow">This is what I'm working on.</a> If you scroll to JS line 63 you will see the function I am having difficulty with. I am trying to replace my setInterval code (in comments) with requestAnimationFrame. But the animation seems to be going rather slowly, also,  it doesn't ever stop!! <a href="http://jsfiddle.net/watson/cUSBQ/10/" rel="nofollow">Here is a working version with setInterval</a>. </p>
  
  <p>Relevant JS:</p>
  
  <pre><code>function setGauge(val){
      var time = 350;
      time = time / (Math.abs(val - preVal));
  
      if (val &gt; preVal) {
          function getHigher(){
             if (preVal == val)
                  cancelAnimationFrame(animate);
              preVal++;
              drawValueArc(preVal);
              var animate = requestAnimationFrame(getHigher);
          }
          getHigher();
          /*
          var animate = setInterval(function(){
              if (preVal == val)
                  clearInterval(animate);
              preVal++;
              drawValueArc(preVal);  
          }, time);
          */
      } else if (val &lt; preVal) {
          function getLower(){
             if (preVal == val)
                  cancelAnimationFrame(animate2);
              preVal--;
              drawValueArc(preVal);  
              var animate2 = requestAnimationFrame(getLower);
          }
          getLower();
          /*
          var animate2 = setInterval(function(){
              if (preVal == val)
                  clearInterval(animate2);
              preVal--;
              drawValueArc(preVal);  
          }, time);
          */
      } 
  }
  </code></pre>