O Guilherme fez um post alguns meses atrás sobre a API Page Visibility, que permite, entre outras coisas, ao programador front-end definir comportamentos da página quando ela não está visível (por exemplo, quando o usuário muda de tab dentro do browser).
Para um projeto, precisei desse comportamento para verificar se um usuário ficaria ao carregar a página ficar com ela aberta por um certo tempo, afim de criar algumas estatísticas.
Como a API ainda está bem no começo, em draft, as engines dos browsers usam os seus prefixos para tratar os eventos associados a esse comportamento, então para me ajudar usei o plugin Page Visibility for jQuery. O uso é muito simples: associe aos eventos show e hide do $(document) funções. Do exemplo do próprio autor:
$(document).on({
'show': function() {
console.log('The page gained visibility; the `show` event was triggered.');
},
'hide': function() {
console.log('The page lost visibility; the `hide` event was triggered.');
}
});
Então, para usar um contador, você pode fazer assim:
var d = document.getElementById("container_visibility");
var count_timer = null;
var counter = 0;
var f = function() {
count_timer = setTimeout(function() {
d.innerHTML += counter + "<br />";
f();
counter++;
}, 1000)
}
f();
$(document).on({
'show': function() {
counter = 0;
d.innerHTML += "contador resetado<br />";
f();
},
'hide': function() {
clearTimeout(count_timer);
}
});
O que eu fiz, foi simples: criei uma função f() que chama setTimeout com intervalo de 1 segundo e escreve numa div de id="container" o valor de counter; então, quando a página perde visibilidade, apago o setTimeout com clearTimeout e quando a página ganha visibilidade, reseto o counter e chamo novamente f().
Em http://jsfiddle.net/chrisbenseler/7NH3z/ publiquei um exemplo com essa implementação, ao lado de um counter que não é resetado quando a página perde visibilidade.