Find screen refresh r

by Manikandan Kalaivanan

HTML

<div id="con">
  <h3>Method 1</h3>
<div id="fps"></div>

<h3>Method 2</h3>
<div id="fps-2"></div>

</div>

JavaScript

if (!window.requestAnimationFrame) {
  window.requestAnimationFrame =
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;
}

var t = [];

function animate(now) {

  t.unshift(now);
  if (t.length > 10) {
    var t0 = t.pop();
    var fps = Math.floor(1000 * 10 / (now - t0));
    $('#fps').text(fps + ' fps');
  }

  window.requestAnimationFrame(animate);
};

window.requestAnimationFrame(animate);


function inRange(n, nStart, nEnd) {
  if (n >= nStart && n <= nEnd) return true;
  else return false;
}

// Function that returns a Promise for the FPS
const getFPS = () =>
  new Promise(resolve =>
    requestAnimationFrame(t1 =>
      requestAnimationFrame(t2 => resolve(1000 / (t2 - t1)))
    )
  )

// Calling the function to get the FPS
getFPS().then(fps => {

console.log(inRange(fps, 58, 65));

  if (inRange(fps, 58, 65)) {
  	$('#con').append('<p>this screen supports '+ Math.ceil(fps) +' hz</p>');
  }else {
  	$('#con').append('(<p>this screen supports more than 60hz which is '+ Math.ceil(fps) +'</p>');
  }
  $('#fps-2').text(fps + ' fps')
    
});