I have developed a unique countdown feature that only runs when the user is actively using the browser window. It works perfectly, but I am facing an issue when integrating this code into an AngularJS controller. I have included my code below for reference.
JavaScript:
var span = angular.element('#count');
var counter = 30;
var timer;
var startTimer = function() {
// do nothing if timer is already running
if (timer) return;
timer = setInterval(function() {
counter--;
if (counter >= 0) {
span.innerHTML = counter;
}
// Display 'counter' wherever you want to display it.
if (counter === 0) {
alert('this is where it happens');
stopTimer();
}
}, 1000);
};
var stopTimer = function() {
clearInterval(timer);
timer = null;
};
var onBlur = function() {
stopTimer();
};
var onFocus = function() {
startTimer();
};
var onLoad = function() {
startTimer();
};
angular.element(window).load(onLoad);
angular.element(window).blur(onBlur);
angular.element(window).focus(onFocus);
HTML:
<a class="btn btn-medium btn-orange" href="">
In<span id="count">30</span></a>