Saber se a página está sendo visualizada

[WictorP 9]

Olá galera,

O que eu preciso hoje é saber se o navegador está exibindo a página ou não. Como assim?

Simples...

Supomos que temos aquele site de download, e que temos que esperar aqueles clássicos 20 segundos antes do início do download, aí temos aquele contador regressivo, porém, o que eu quero é que esse contador regressivo só rode se página estiver em visualização...

Ou seja, se eu clicar lá em download, começar e disparar o contador, e eu mudar pra aba do facebook, o contador paralisa, e só retorna após eu voltar pra página do download...

 

Queria uma luz de como fazer isso...

Obrigado.

[Gcampano 0]

var contador = 0;
var ativo = false;

//site começou a ser visualizado 
document.addEventListener("mouseenter", function() {
  ativo = true; 
}); 

//o site parou de ser visualidado
document.addEventListener("mouseleave", function() {
  ativo = false; 
}); 

//a cada 1 segundo verifica se o site está sendo visualizado 
setInterval(function () { 
  
  if(ativo){
    contador++;
    console.log("Contador: " + contador); 
  } 

}, 1000);

Isso funciona parcialmente pois o usuário precisa colocar o mouse sobre algum conteúdo da pagina para contador funcionar.