Web-based timer application using window.setInterval method in JavaScript does not work as expected in the mobile browser. The reason behind this is that after a certain time, the display goes off due to user inactivity and an application is moved to the background for power saving. Due to which window.setInterval does not trigger periodically and the entire calculation goes for a toss.
However, I have noticed that certain web-based timer works fine in the mobile browser despite these limitations. E.g. Google Timer. Despite the above limitation Google Timer works fine even in offline mode. What techniques are used by these applications so they work on mobile browser as well.
You need to use system time in the calculations. That way when your page comes forth again it’ll show status based on current time instead of relying on past steps.
btn.addEventListener('click', () => {
btn.disabled = true;
const start = new Date().getTime();
const end = input.value * 60 * 1000 + start;
let timer = setInterval(update, 1000);
update();
function update() {
const current = new Date().getTime();
let remaining = (end - current) / 1000;
if (remaining <= 0) {
clearInterval(timer);
btn.disabled = false;
output.textContent = 'Done!'
} else {
output.textContent = `${Math.floor(remaining / 60)}m ${Math.floor(remaining%60)}s`;
}
}
});<button id="btn">Countdown</button>
<input id="input" type="number" value="2" min=1 max=59 size=5 />mins
<p id="output">0m 0s</p>