JavaScriptsetTimeout – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o JavaScript setTimeout()que define um cronômetro e executa uma função de retorno de chamada após o cronômetro expirar.

Introdução ao JavaScript`setTimeout()`

O setTimeout()é um método do windowobjeto. Define setTimeout() um cronômetro e executa uma função de retorno de chamada após o cronômetro expirar.

O seguinte ilustra a sintaxe de setTimeout():

let timeoutID  = setTimeout(cb [,delay], arg1, arg2,...);
Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe:

cbé uma função de retorno de chamada a ser executada após o tempo expirar.
delayé o tempo em milissegundos que o cronômetro deve esperar antes de executar a função de retorno de chamada. Se você omitir, o delaypadrão será 0.
arg1, arg2,… são argumentos passados para a cbfunção de retorno de chamada.

O setTimeout()retorna a timeoutIDque é um número inteiro positivo que identifica o temporizador criado como resultado da chamada do método.

O timeoutIDpode ser usado para cancelar o tempo limite, passando-o para o clearTimeout()método.

`setTimeout()`Exemplo de JavaScript

O seguinte cria dois botões simples e os conecta ao setTimeout()e clearTimeout().

Quando você clica no Showbotão, o showAlert()é invocado e mostra uma caixa de diálogo de alerta após 3 segundos. Para cancelar o tempo limite, você clica no Cancelbotão.

HTML

<p>JavaScript setTimeout Demo</p>
<button onclick="showAlert();">Show</button>
<button onclick="cancelAlert();">Cancel</button>
Linguagem de código:  HTML, XML  ( xml )

JavaScript

var timeoutID;

function showAlert() {
    timeoutID = setTimeout(alert, 3000, 'setTimeout Demo!');
}

function clearAlert() {
    clearTimeout(timeoutID);
}
Linguagem de código:  JavaScript  ( javascript )

Saída

Demonstração de JavaScript setTimeout

Como `setTimeout()`funciona o JavaScript

JavaScript é de thread único, portanto, só pode executar uma tarefa por vez. Isso significa que ele só pode realizar uma única tarefa em um determinado momento. Além do mecanismo JavaScript, o navegador da web possui outros componentes, como Event Loop , Call Stack e Web API.

Quando você chama o setTimeout(), o mecanismo JavaScript cria um novo contexto de execução de função e o coloca na pilha de chamadas .

O setTimeout()executa e cria um cronômetro no componente APIs da Web do navegador da web. Quando o cronômetro expira, a função de retorno de chamada passada setTimeout()é colocada na fila de retorno de chamada.

O loop de eventos monitora a pilha de chamadas e a fila de retorno de chamada. Ele remove a função de retorno de chamada da fila de retorno de chamada e a coloca na pilha de chamadas quando a pilha de chamadas está vazia.

Assim que a função de retorno de chamada estiver na pilha de chamadas, ela será executada.

Veja o exemplo a seguir:

function task() {
    console.log('setTimeout Demo!')
}

setTimeout(task, 3000);
Linguagem de código:  JavaScript  ( javascript )

Neste exemplo:

Primeiro, o setTimeout()é colocado na pilha de chamadas. Ele cria um cronômetro na API Web.

javascript setTimeout etapa 1

Em segundo lugar, após aproximadamente 3 segundos, o cronômetro expira, é taskenviado para a fila de retorno de chamada e aguardado pela próxima oportunidade de execução.

Terceiro, como a pilha de chamadas está vazia, o loop de eventos remove o task()da fila de retorno de chamada, coloca-o na pilha de chamadas e o executa: