JSFiddle - React, Tailwind, and code Playground
HTML
<div id="focusTxt"></div>
JavaScript
var FocusCheckr = function() {
var _that = {},
_lastSeen = 0,
_timerInterval = 50,
_handlers = [];
//Public Properties
_that.timerThreshold = 1000;
//Public Methods
_that.onFocus = function(handler, params) {
var hiddenProp = getHiddenProp();
if (hiddenProp) {
var evtName = hiddenProp.replace(/[H|h]idden/, "") + "visibilitychange";
document.addEventListener(evtName, function(e) {
if (isHidden()) {
handler(e, params);
}
}, false);
}else {
var handlerObj = {"handler": handler};
if (params !== undefined) {handlerObj.params = params}
_handlers.push(handlerObj);
startLoop();
}
};
//Private Methods
var animFrame = (function(req, can) {
//Polyfill by Erik Möller for requestAnimationFrame.
//Edits by Matthew Kirschner.
var af = {},
lastTime = 0,
vendors = ["webkit", "moz", "o", "ms"];
af[req] = window.requestAnimationFrame;
af[can] = window.cancelAnimationFrame;
for(var x = 0, l = vendors.length; x < l && !af[req]; ++x) {
af[req] = window[vendors[x]+'RequestAnimationFrame'];
af[can] = window[vendors[x]+"CancelAnimationFrame"] ||
window[vendors[x]+"CancelRequestAnimationFrame"];
}
if (!af[req]) {
af[req] = function(callback, element) {
var currTime = Date.now(),
timeToCall = Math.max(0, 16 - (currTime - lastTime)),
id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!af[can]) {
af[can] = function(id) {
...