Hello experts, i am building an online exam application. It has a Jquery timer...everything works fine...but i recently noticed that when the examinee minimizes, opens other tabs...or basically the browser is out of focus...the jquery timer pauses...after a certain while, if i again open the browser, the timer starts again from the value it had when the browser was minimized. I don't know what the issue here is. I've used both older and newer version of the jquery library...and tried all sorts of things, but nothing seems to work. This problem persists in mozilla and chrome...but suprizingly IE does not show this problem...How can i resolve this issue...as most people do not use IE these days...even if they did, we can't be sure that, they'll always use IE.
Here is a snipped of the jQUery code:
var countdownTimer, countdownCurrent;
$(document).ready(function () {
countdownCurrent = $('#ctl00_MainContent_example2submit').val() * 100;
countdownTimer = $.timer(function () {
var min = parseInt(countdownCurrent / 6000);
var sec = parseInt(countdownCurrent / 100) - (min * 60);
var micro = pad(countdownCurrent - (sec * 100) - (min * 6000), 2);
var output = "00"; if (min > 0) { output = pad(min, 2); }
$('.countdowntime').html(output + ":" + pad(sec, 2) + ":" + micro);
if (countdownCurrent == 0) {
$('#ctl00_MainContent_btnNext').click();
} else {
countdownCurrent -= 7;
if (countdownCurrent < 0) { countdownCurrent = 0; }
}
}, 70, true);
$('#example2submit').bind('keyup', function (e) { if (e.keyCode == 13) { countdownReset(); } });
});
function CheckIfOptionSelected() {
var vFlag = true;
var radioButton1 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_0'];
var radioButton2 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_1'];
var radioButton3 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_2'];
var radioButton4 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_3'];
if (radioButton1.checked == false && radioButton2.checked == false && radioButton3.checked == false && radioButton4.checked == false && countdownCurrent > 0) {
vFlag = false;
}
else {
countdownReset();
vFlag = true;
}
return vFlag;
}
function countdownReset() {
var newCount = parseInt($('#ctl00_MainContent_example2submit').val()) * 100;
if (newCount > 0) { countdownCurrent = newCount; }
}
function pad(number, length) {
var str = '' + number;
while (str.length < length) { str = '0' + str; }
return str;
}
EDIT
Here is the fiddle...and it is showing the exact problem i mentioned above...just minimize or open another tab and work there for a while...then again focus the browser where the timer is running...you'll see that the timer has not elpsed much...http://jsfiddle.net/mlimbu/wLk5b/3/