Entendendo os temporizadores: setTimeout e setInterval

setTimeout – Sua sintaxe é a seguinte:

 var timerId = setTimeout(func|code, delay);

func|code
         Variável de função ou uma cadeia de código para executar.

Delay
         O atraso em microssegundos, onde 1000 microssegundos = 1 segundo.

Vejamos a um exemplo prático:

 var delay=1000; //1 seconds setTimeout(function(){ alert(“Ola mundo!”); //your code to be executed after 1 seconds },delay); 

O Browser fornece um agendador embutido que permite a função de configuração chamar uma execução após determinado período de tempo.

A execução ocorrerá após o prazo concedido, ou seja, após 1 segundo o browser envia uma mensagem de alerta ao usuário.

setInterval - Sua sintaxe é a seguinte:

 var timer = setInterval(function() { alert(i++) }, 2000);

O setInterval têm os mesmos recursos que o setTimeout. Ele agenda a execução repetindo-a a cada microssegundos de atraso, que pode ser interrompido pela chamada chamada clearInterval. O exemplo a seguir lhe dará um alerta a cada 2 segundos:

 <script> var i = 1 var timer = setInterval(function() { alert(i++) }, 2000) </script> 

clearInterval - Sua sintaxe é a seguinte:  

 clearInterval(varID);

O método clearInterval () limpa um temporizador definido com o método setInterval (). No exemplo abaixo, o tempo limite é definido e, em seguida, liberado, então nada acontece:

 var timerId = setTimeout(function() { alert(1) }, 1000); clearInterval(timerId); 

Podemos então unir os dois recursos. O exemplo a seguir lhe dará um alerta a cada 2 segundos até que você pressione stop.  Execute-o para ver em ação:

 <input type="button" onclick="clearInterval(timer)" value="stop"> <script> var i = 1; var timer = setInterval(function() { alert(i++) }, 2000); </script> 

Depois de testar os exemplos acima já é possível implementar esses códigos de acordo com nossa necessidade. Um bom motivo para usar este atraso (delay), é o seguinte: Imagine que você está cadastrando um cliente, como é um registro por vez, às vezes não sabemos se deu certo por não aparecer nada, ou foi tão rápido que nem percebemos a mensagem enviada ao usuário do sucesso na transação. 

Uma forma de contornarmos este “problema”, é que podemos utilizar este método para atrasar a mensagem a ponto do usuário ler a mensagem, ou ao menos ver um gif animado de processamento, ficando muito mais atrativo seu formulário.

Alguns têm muitos problemas para fazer tal implementação, porque também podemos usar o timer propriamente do PHP da seguinte forma:

 header('Refresh: 10;URL=usermainpage.php');

Este comando atrasa em 10 segundos o redirecionamento para a página mencionada na URL.

Só que temos vários problemas com essa escolha, uma delas é a configuração do servidor APACHE, PHP. Você usa esse comando do PHP, funciona local e quando sobe para o servidor do seu domínio, nada funciona, e você não tem acesso de configuração, qual a solução?

Se você deseja que sua página renderize primeiro, mostrando alguma mensagem ou imagem para o usuário, então o redirecionamento deve acontecer do lado do cliente (client-side), visto que o PHP trabalha do lado do servidor (server-side), portanto é desejável usar a função setTimeout do javascript :

 <img src='loader_blue.gif' /> <h1>Armazenando dados do cliente, aguarde....</h1> <script type='text/JavaScript'> setTimeout(function () { window.location.href = 'caminho-do-seu-arquivo-que-sera-chamado'; }, 5000); </script> 

Este exemplo mostra um gif animado de processamento e uma mensagem ao usuário, que depois de cinco segundos ele redireciona para a página desejada. Uma boa pedida para este comando é o LOGOUT, onde o usuário sai do sistema obrigando a digitar a senha novamente, uma segurança quando você não está usando o sistema, ou saiu da frente do computador.

Espero ter ajudado, qualquer dúvida, deixe recado nos comentários...