fps.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>FPS demo</title>
  6. </head>
  7. <body>
  8. <div id='water'></div>
  9. <script src="../dist/request-frame.js"></script>
  10. <script>
  11. var request = requestFrame('request');
  12. // Just add water
  13. var div = document.getElementById('water'); // Demo
  14. /**
  15. * setFPS sets the frame rate of the rAF function
  16. * with minimum overhead.
  17. * @Copyright Julien Etienne 2015
  18. * @License MIT
  19. */
  20. function setFPS(callback, rAF, fps) {
  21. // indexOf polyfill from MDN
  22. if (!Array.prototype.indexOf) {
  23. Array.prototype.indexOf = function(searchElement, fromIndex) {
  24. var k;
  25. if (this == null) {
  26. throw new TypeError('"this" is null or not defined');
  27. }
  28. var O = Object(this);
  29. var len = O.length >>> 0;
  30. if (len === 0) {
  31. return -1;
  32. }
  33. var n = +fromIndex || 0;
  34. if (Math.abs(n) === Infinity) {
  35. n = 0;
  36. }
  37. if (n >= len) {
  38. return -1;
  39. }
  40. k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
  41. while (k < len) {
  42. if (k in O && O[k] === searchElement) {
  43. return k;
  44. }
  45. k++;
  46. }
  47. return -1;
  48. };
  49. }
  50. function isAnimationFrameFunction(func) {
  51. if (!func) {
  52. return;
  53. }
  54. var reference = func.toString();
  55. reference = reference.indexOf('AnimationFrame') > -1;
  56. return reference;
  57. }
  58. if (isAnimationFrameFunction(rAF)) {
  59. this.fPSTimeStamp = 0;
  60. } else {
  61. this.fPSTimeStamp = new Date().getTime();
  62. }
  63. (function loopCallback(time) {
  64. if (time > fPSTimeStamp) {
  65. fPSTimeStamp += 1000 / fps;
  66. callback();
  67. }
  68. rAF(loopCallback);
  69. }());
  70. }
  71. // Demo
  72. function showFPSTime() {
  73. div.innerHTML = this.fPSTimeStamp;
  74. }
  75. // Demo
  76. setFPS(showFPSTime, request, 1);
  77. </script>
  78. </body>
  79. </html>