If setInterval's interval is 10 milliseconds, then it will pause if the tab is inactive, but if it is set to 1 second, then it doesn't pause and keeps counting when the tab is inactive. Here are some examples:
1 second -
num = 0;
window.setInterval(function() {
num = num + 1;
document.getElementById('counter').innerHTML = num;
}, 1000);
<html>
<head>
</head>
<body>
<span id="counter">0</span>
</body>
10 milliseconds -
num = 0;
window.setInterval(function() {
num = num + 1;
document.getElementById('counter').innerHTML = num;
}, 10);
<html>
<head>
</head>
<body>
<span id="counter">0</span>
</body>
It appears to skip 80 numbers in its counting on the second one. Why is this? This happens in the snippet and if you have made it yourself, i.e. as a file on your computer.
Is this to do with my computer's processing power in particular, or its memory, or what? I am very confused about this, so any answers would be appreciated.
So, just to reiterate, my questions are:
1) Why is setInterval pausing?
2) Why has it skipped 80 or so numbers when it pauses and then starts again?
3) Why is this only for shorter time intervals?