Existem dois tipos (mais usados) de função de timer em javascript setTimeoute setInterval( outros )
Ambos os métodos têm a mesma assinatura. Eles recebem uma função de retorno de chamada e atrasam o tempo como parâmetro.
setTimeoutexecuta apenas uma vez após o atraso, enquanto setIntervalcontinua chamando a função de retorno de chamada após cada milissegundo de atraso.
esses dois métodos retornam um identificador inteiro que pode ser usado para limpá-los antes que o cronômetro expire.
clearTimeoute clearIntervalambos os métodos usam um identificador inteiro retornado das funções acima setTimeoutesetInterval
Exemplo:
setTimeout
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Se você executar o código acima, verá que ele alerta before setTimeoute, after setTimeoutfinalmente, I am setTimeoutdepois de 1 segundo (1000ms)
O que você pode notar no exemplo é que o setTimeout(...)é assíncrono, o que significa que não espera o tempo decorrido antes de passar para a próxima instrução.alert("after setTimeout");
Exemplo:
setInterval
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Se você executar o código acima, verá que ele alerta before setIntervale, after setIntervalfinalmente, alerta I am setInterval 5 vezes após 1 segundo (1000ms), porque o setTimeout limpa o timer após 5 segundos ou, a cada 1 segundo, você recebe um alertaI am setInterval infinitamente.
Como o navegador faz isso internamente?
Vou explicar em breve.
Para entender que você precisa saber sobre a fila de eventos em javascript. Há uma fila de eventos implementada no navegador. Sempre que um evento é acionado em js, todos esses eventos (como clique etc.) são adicionados a essa fila. Quando o seu navegador não tem nada para executar, ele pega um evento da fila e os executa um por um.
Agora, quando você liga setTimeoutousetInterval seu retorno de chamada é registrado em um timer no navegador, ele é adicionado à fila de eventos após o tempo determinado expirar e, eventualmente, o javascript pega o evento da fila e o executa.
Isso acontece assim, porque o mecanismo javascript é thread único e eles podem executar apenas uma coisa de cada vez. Portanto, eles não podem executar outro javascript e acompanhar o seu cronômetro. É por isso que esses timers são registrados no navegador (o navegador não possui thread único) e ele pode acompanhar o cronômetro e adicionar um evento na fila após o término do cronômetro.
O mesmo acontece setIntervalapenas neste caso, o evento é adicionado à fila repetidamente após o intervalo especificado até que seja limpo ou a página do navegador atualizada.
Nota
O parâmetro de atraso que você passa para essas funções é o tempo mínimo de atraso para executar o retorno de chamada. Isso ocorre porque, após o tempo expirar, o navegador adiciona o evento à fila a ser executada pelo mecanismo javascript, mas a execução do retorno de chamada depende da posição de seus eventos na fila e, como o mecanismo é único, ele executará todos os eventos em a fila um por um.
Portanto, seu retorno de chamada pode demorar um pouco mais do que o tempo de atraso especificado para ser chamado especialmente quando seu outro código bloqueia o encadeamento e não dá tempo para processar o que há na fila.
E como eu mencionei, o javascript é de thread único. Portanto, se você bloquear o encadeamento por muito tempo.
Como este código
while(true) { //infinite loop
}
Seu usuário pode receber uma mensagem informando que a página não está respondendo .
setTimeout(function(){/*YourCode*/},1000);