So I thought I had finished the code for my Pomodoro Clock until I realised that if you don’t have the window focussed then it doesn’t continue counting. I’m currently using p5.js which periodically updates within draw() (I’ve also used setInterval).
I’ve experimented by using Date.now() and calculating the difference, all sorts. But they all have the same issue that when you alt-tab away from the page then it stops.
I thought that if I could capture the event of the user changing window then I could just count the time between it and update it when they return, but that would mean the alarm still wouldn’t activate if you don’t focus the window.
Is this really that complicated to do? It feels like it shouldn’t be!
(Please open the link, the preview doesn’t seem to work :))
SOLVED, solution here:
I fixed the setInterval issue. Firefox and Chrome set intervals to a limit of 1000ms for when the window is not in focus. Therefore, if you adjust your code to work in 1000ms intervals (mine was 100ms) then it should be fine. For example I was -= 0.01 at 100ms, but changing it to 0.1 at 1000ms means the code now works just fine. (I think that was it, anyway :))
what it is i think the libary you are using p5.js, uses requestAnimationFrame() function under the hood, and so when you change tab for some reason requestAnimationFrame no longer updates the page.
to simplify things you could use setInterval. Its not like you need to show millisecond response time.
or to get around this though, you could create a render function
function render() {
// TODO update seconds, minutes left, title
if (document.hidden) { // in another tab
setTimeout(render, 500) // 500ms
return
}
requestAnimationFrame(render)
}
you may also want to make a boolean to set to stop the render function calling itself.
I tried using setInterval but because I’m updating the text with the draw() function it won’t update it unless it’s on the page. I thought it would be easier to use p5 but starting to regret it slightly ha.
As to the other suggestion, I am not quite sure what a render function is …
//
Solution for anyone that needs it
I fixed the setInterval issue. Firefox and Chrome set intervals to a limit of 1000ms for when the window is not in focus. Therefore, if you adjust your code to work in 1000ms intervals (mine was 100ms) then it should be fine. For example I was -= 0.01 at 100ms, but changing it to 0.1 at 1000ms means the code now works just fine. (I think that was it, anyway :))