Exemplo de uso da API Page Visibility

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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *