JavaScript setTimeout explicado: sintaxe, exemplos e boas práticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução: O que é o JavaScript setTimeout?

JavaScript é uma das linguagens de programação centrais usadas para criar elementos dinâmicos e interativos no desenvolvimento web. Entre suas muitas funcionalidades, a função setTimeout é frequentemente usada para executar processos específicos após um determinado período de tempo.

Essa função funciona como um temporizador: uma vez que o atraso especificado tenha decorrido, ela executa uma função ou bloco de código dentro do programa. Isso facilita a implementação de cenários como animações, exibição de pop‑ups e processamento atrasado.

Casos de Uso Comuns do JavaScript setTimeout

1. Animações atrasadas – Por exemplo, adicionar um pequeno atraso antes de fazer um elemento aparecer gradualmente.
2. Controle de interações do usuário – Atrasar cliques ou envios de formulário para evitar operações acidentais.
3. Agendamento de tarefas – Gerenciar múltiplas tarefas assíncronas de forma eficiente, executando‑as sequencialmente após um atraso.

Por que o setTimeout é Necessário?

O JavaScript roda basicamente em uma única thread, o que significa que ele não pode executar múltiplos processos ao mesmo tempo. Como consequência, um processamento complexo pode fazer a tela travar.

Entretanto, ao usar setTimeout para agendar processamento assíncrono, você pode manter a interface do usuário responsiva enquanto lida com outras tarefas em segundo plano.

Sintaxe Básica do setTimeout

setTimeout(function, delay);

• function : O código ou função a ser executado após o atraso.
• delay : O tempo de atraso antes da execução (em milissegundos). Um segundo equivale a 1000 milissegundos.

Exemplo:

setTimeout(() => {
    console.log('Displayed after 3 seconds');
}, 3000);

Esse código exibe a mensagem “Displayed after 3 seconds” no console após três segundos.

Resumo

A função setTimeout em JavaScript é um recurso extremamente útil para controlar o tempo dentro de um programa. É fácil de usar e suporta uma ampla variedade de cenários, como animações e processamento assíncrono.

Na próxima seção, exploraremos um uso mais detalhado e exemplos práticos de código do setTimeout.

2. Sintaxe Básica e Comportamento do setTimeout

A função JavaScript setTimeout executa uma função após um período de tempo especificado. Nesta seção, explicaremos seu uso básico e comportamento com exemplos concretos.

Sintaxe Básica do setTimeout

setTimeout(function, delay, [arg1, arg2, ...]);

Descrição dos parâmetros:

1. function: A função ou bloco de código a ser executado.
2. delay: O tempo de atraso em milissegundos.
3. arg1, arg2, …: Argumentos opcionais passados para a função.

Uso Básico

Exemplo 1: Execução simples com atraso

setTimeout(() => {
    console.log('Executed after 3 seconds');
}, 3000);

Esse código exibe “Executed after 3 seconds” no console após três segundos.

Exemplo 2: Usando uma função nomeada

function greet() {
    console.log('Hello!');
}
setTimeout(greet, 2000);

Neste exemplo, a função greet é chamada após dois segundos e exibe “Hello!”.

Passando Argumentos

function sayMessage(message) {
    console.log(message);
}
setTimeout(sayMessage, 1500, 'Good morning!');

Saída:

Good morning!

Cancelando um Timer

Para cancelar um timer antes que ele seja executado, use a função clearTimeout.

const timerId = setTimeout(() => {
    console.log('This message will not be displayed');
}, 3000);

// Cancel the timer
clearTimeout(timerId);

Resumo

Nesta seção, cobrimos a sintaxe básica e exemplos práticos do setTimeout.

• Explicamos o uso básico, a passagem de argumentos e como obter e cancelar um ID de timer.
• A próxima seção aprofunda o uso avançado e considerações importantes.

3. Uso Avançado: Passando Argumentos e Manipulando this

Nesta seção, exploramos o uso avançado de setTimeout. Em particular, focamos em como passar argumentos para funções e considerações importantes sobre o comportamento de this.

Passando Argumentos

Exemplo 1: Passagem simples de argumento

function greet(name) {
    console.log(`Hello, ${name}!`);
}
setTimeout(greet, 2000, 'Taro');

Saída:

Hello, Taro!

Passando Múltiplos Argumentos

function add(a, b) {
    console.log(a + b);
}
setTimeout(add, 1000, 5, 10);

Saída:

15

Notas Importantes Sobre o Comportamento de this

Exemplo: this não se comporta como esperado

const obj = {
    name: 'Taro',
    greet: function() {
        setTimeout(function() {
            console.log(`Hello, ${this.name}!`);
        }, 1000);
    }
};
obj.greet();

Saída:

Hello, undefined!

Soluções

Usando Funções Arrow

greet: function() {
    setTimeout(() => {
        console.log(`Hello, ${this.name}!`);
    }, 1000);
}

Usando o Método bind

greet: function() {
    setTimeout(function() {
        console.log(`Hello, ${this.name}!`);
    }.bind(this), 1000);
}

Resumo

Nesta seção, explicamos como passar argumentos para funções usando setTimeout e destacamos considerações importantes ao trabalhar com this.
Na próxima seção, comparamos setTimeout com setInterval e explicamos quando usar cada um.

4. Diferenças Entre setTimeout e setInterval

Em JavaScript, há outra função relacionada a temporização semelhante ao setTimeout chamada setInterval. Embora ambas sejam usadas para processamento baseado em tempo, seu comportamento difere significativamente. Esta seção explica suas diferenças e como escolher entre elas.

Principais Diferenças Entre setTimeout e setInterval

Exemplo: Comportamento do setTimeout

setTimeout(() => {
    console.log('Executed only once');
}, 2000);

Este código exibe “Executed only once” uma única vez após dois segundos.

Exemplo: Comportamento do setInterval

setInterval(() => {
    console.log('Executed every second');
}, 1000);

Este código exibe repetidamente “Executed every second” em intervalos de um segundo.

Cancelando setInterval

const intervalId = setInterval(() => {
    console.log('Running repeatedly...');
}, 1000);

// Stop the interval after 5 seconds
setTimeout(() => {
    clearInterval(intervalId);
    console.log('Interval stopped');
}, 5000);

Usando setTimeout para Execução Repetida

function repeat() {
    console.log('Executed repeatedly');
    setTimeout(repeat, 1000); // Call itself again after 1 second
}
repeat();

Resumo

Nesta seção, explicamos as diferenças entre setTimeout e setInterval e como usá-las adequadamente.
Na próxima seção, apresentamos exemplos de uso mais práticos e do mundo real.

5. Casos de Uso Práticos do setTimeout

Nesta seção, apresentamos exemplos práticos e do mundo real usando setTimeout. Por meio desses exemplos, você pode aprender a implementar controle de temporização em vários cenários.

Caso de Uso 1: Controlando uma Animação de Carregamento

const loader = document.getElementById('loader');
loader.style.display = 'block';

setTimeout(() => {
    loader.style.display = 'none';
    console.log('Loading completed');
}, 3000);

Caso de Uso 2: Prevenindo Cliques Rápidos em Botões (Debounce)

let timeout;

document.getElementById('submitButton').addEventListener('click', () => {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
        console.log('Click confirmed');
    }, 500);
});

Caso de Uso 3: Ação Atrasada Durante a Navegação da Página

const link = document.getElementById('pageLink');

link.addEventListener('click', (e) => {
    e.preventDefault();
    document.body.style.opacity = '0';

    setTimeout(() => {
        window.location.href = e.target.href;
    }, 500);
});

Caso de Uso 4: Apresentação Automática

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;

function showNextImage() {
    const imgElement = document.getElementById('slideshow');
    imgElement.src = images[currentIndex];

    currentIndex = (currentIndex + 1) % images.length;

    setTimeout(showNextImage, 3000);
}
showNextImage();

Caso de Uso 5: Quiz com Tempo Limitado

let timeLeft = 10;

const timer = setInterval(() => {
    console.log(`Time remaining: ${timeLeft} seconds`);
    timeLeft--;

    if (timeLeft < 0) {
        clearInterval(timer);
        console.log('Time is up!');
    }
}, 1000);

Resumo

Nesta seção, apresentamos vários casos de uso práticos de setTimeout.
Na próxima seção, explicaremos considerações importantes e dicas de solução de problemas.

6. Observações Importantes e Solução de Problemas

Nesta seção, explicamos os pontos principais a ter em mente ao usar setTimeout, juntamente com problemas comuns e como resolvê-los.

1. O Tempo de Execução do setTimeout Não é Exato

console.log('Start');

setTimeout(() => {
    console.log('Timer executed');
}, 2000);

console.log('End');

Saída:

Start  
End  
Timer executed (after 2 seconds)

Solução:

const start = Date.now();
setTimeout(() => {
    const elapsed = Date.now() - start;
    console.log(`Execution time: ${elapsed} milliseconds`);
}, 2000);

2. Erros de Referência this Dentro do setTimeout

const obj = {
    name: 'Taro',
    greet: function() {
        setTimeout(function() {
            console.log(`Hello, ${this.name}!`);
        }, 1000);
    }
};
obj.greet();

Solução 1: Usando Funções Arrow

setTimeout(() => {
    console.log(`Hello, ${this.name}!`);
}, 1000);

Solução 2: Usando o Método bind

setTimeout(function() {
    console.log(`Hello, ${this.name}!`);
}.bind(this), 1000);

3. Esquecendo de Cancelar Temporizadores

const timerId = setTimeout(() => {
    console.log('This will execute');
}, 5000);

// Cancel the timer based on a condition
clearTimeout(timerId);

Resumo

Nesta seção, cobrimos observações importantes e dicas de solução de problemas ao usar setTimeout.
Na próxima seção, respondemos às perguntas frequentes (FAQ) dos leitores.

7. FAQ: Perguntas Frequentes Sobre setTimeout

Nesta seção, resumimos perguntas comuns sobre setTimeout em formato de FAQ.

Q1. O setTimeout(0) executa imediatamente?

R: Não, setTimeout(0) não executa imediatamente.

console.log('Start');

setTimeout(() => {
    console.log('Timer executed');
}, 0);

console.log('End');

Saída:

Start  
End  
Timer executed

Q2. Como posso parar um temporizador no meio?

R: Você pode parar um temporizador usando clearTimeout.

const timerId = setTimeout(() => {
    console.log('This will not be executed');
}, 5000);

clearTimeout(timerId);

Q3. Posso passar argumentos para o setTimeout?

R: Sim, você pode passar argumentos a partir do terceiro parâmetro.

function greet(name) {
    console.log(`Hello, ${name}!`);
}

setTimeout(greet, 2000, 'Taro');

Resumo

Nesta seção, cobrimos perguntas frequentes e respostas relacionadas ao setTimeout.
Na próxima seção, resumimos os pontos principais deste artigo e fornecemos conselhos práticos finais.

8. Resumo Final e Informações Adicionais

Neste artigo, abordamos a função JavaScript setTimeout em profundidade, desde o uso básico até exemplos avançados, considerações importantes e perguntas frequentes.

1. Principais Conclusões

1. Cobertura abrangente do básico ao avançado: Explicamos tudo passo a passo, desde os conceitos básicos amigáveis para iniciantes até exemplos avançados, solução de problemas e perguntas frequentes.
2. Exemplos de código práticos: Fornecemos muitos exemplos concretos que você pode testar e aplicar no desenvolvimento real.
3. Considerações importantes e soluções: Abordamos atrasos na execução, questões de referência ao this e como cancelar timers corretamente.

2. Recursos adicionais

Documentação oficial:

• MDN Web Docs: setTimeout

Recursos de aprendizado:

• Explorar a documentação geral sobre processamento assíncrono em JavaScript ajudará a aprofundar sua compreensão.

3. Considerações finais

A função JavaScript setTimeout é uma ferramenta simples, porém poderosa, que suporta uma ampla variedade de casos de uso. Ao aplicar os conceitos básicos, técnicas avançadas e boas práticas apresentadas neste artigo, você poderá escrever código mais flexível e prático.