4.1 Função setTimeout
Timers em JavaScript permitem executar ações específicas depois de determinados intervalos de tempo. Dois métodos principais
para trabalhar com timers são setTimeout() e setInterval(). Eles são usados para executar
código com atraso ou em intervalos regulares de tempo.
O método setTimeout() permite executar uma função uma vez após um determinado número de milissegundos.
Isso é útil para execução atrasada do código.
Sintaxe:
const timeoutID = setTimeout(callback, delay, ...args);
Onde:
callback: função que será executadadelay: atraso em milissegundos antes da execução da funçãoargs: argumentos adicionais que serão passados para a funçãocallback
Exemplo de uso do setTimeout():
// Função que será executada em 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configurando o timer
const timeoutID = setTimeout(greet, 2000);
4.2 Cancelando o timer setTimeout
Se precisar cancelar a execução de uma função agendada pelo setTimeout(), é possível usar o método clearTimeout():
// Função que será executada em 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configurando o timer
const timeoutID = setTimeout(greet, 2000);
// Cancelando o timer
clearTimeout(timeoutID);
Exemplo com argumentos adicionais:
// Função que será executada em 2 segundos com argumentos
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Configurando o timer com passagem de argumento
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Função setInterval
O método setInterval() permite executar uma função repetidamente em intervalos de tempo especificados. Isso é útil
para execução periódica do código.
Sintaxe:
const intervalID = setInterval(callback, delay, ...args);
Onde:
callback: função que será executadadelay: intervalo em milissegundos entre as chamadas da funçãoargs: argumentos adicionais que serão passados para a funçãocallback
Exemplo de uso do setInterval:
// Função que será executada a cada 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configurando o intervalo
const intervalID = setInterval(greet, 2000);
4.4 Cancelando o intervalo setInterval
Se precisar parar a execução repetida de uma função, é possível usar o método clearInterval().
// Função que será executada a cada 2 segundos
function greet() {
console.log('Hello, world!');
}
// Configurando o intervalo
const intervalID = setInterval(greet, 2000);
// Cancelando o intervalo após 10 segundos
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
Exemplo com argumentos adicionais:
// Função que será executada a cada 2 segundos com argumentos
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Configurando o intervalo com passagem de argumento
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Exemplos de uso prático
Exemplo 1: Atualização automática do tempo
<!DOCTYPE html>
<html>
<head>
<title>Atualização Automática do Tempo</title>
</head>
<body>
<h1>Hora Atual</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Atualiza a hora a cada segundo
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Exemplo 2: Requisição periódica de dados
// Função para simular requisição de dados
function fetchData() {
console.log('Fetching data...');
// Aqui pode realizar uma requisição real para o servidor
}
// Executa a requisição de dados a cada 10 segundos
const intervalID = setInterval(fetchData, 10000);
// Para as requisições após 1 minuto
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION