Geek Answers Handbook

RequestAnimationFrame: Frame Return Explanation

So, I found this useful piece of code and used it to provide the instant frame rate of some animation that I created. I was hoping someone could help me understand how this works?

Here is my code:

<script src="jquery.js"></script>

window.countFPS = (function () {
  var lastLoop = (new Date()).getMilliseconds();
  var count = 1;
  var fps = 0;

  return function () {
    var currentLoop = (new Date()).getMilliseconds();
    if (lastLoop > currentLoop) {
      fps = count;
      count = 1;
    } else {
      count += 1;
    }
    lastLoop = currentLoop;
    return fps;
  };
}());

(function loop() {
  requestAnimationFrame(function () {
    $('#out').html(countFPS());
    loop();
  });
}());

#out results in an output tag if this is not obvious.

+4
source share
2 answers

all magic happens in requestAnimationFrame, which is a black box that really does everything necessary for the function to work. he tells you that "now I have free resources to create a new image"

" ". : 24 2015 , 10: 55: 10.1492 169, 24 2015 , 10: 55: 10.1492 525. 356 . ,

pointy, ( ), , -

+4

countFPS , , . , , "" ( count). , 1.

2, , , . , "" . requestAnimationFrame() , - 60 . , . DOM ( "out" ), , .

+1

More articles:


All Articles