Diário de bordo #2

Olá a todos, como uma atualização do que eu estou aprendendo eu trouxe algumas funções do JavaScript que achei bacana a utilização e gostaria de compartilhar o que eu aprendi sobre elas e as suas diferenças.

Temporização

Como o próprio nome diz, eles servem para setar um determinado tempo para que uma determinada ação ocorra, ou a repetição desta ação(veremos isso logo abaixo).

setTimeout()

Em resumo ela serve para definir a quantidade de tempo de espera para que uma determinada ação aconteça, veja o exemplo de código abaixo.

function executeMessage() {
  document.write('Executando a mensagem...');
};

setTimeout(executeMessage, 3000)

Neste bloco de código eu trouxe uma função que executa uma mensagem em JavaScript retornando isso no corpo do documento no HTML. Para que o setTimeout funcione precisamos trazer 2 parametros, o primeiro é a função a ser executada, que no meu caso é a executeMessage e o tempo de espera para que ela seja executada. Neste exemplo ela é executada após 3 segundos após sua inicialização.

setInterval()

Já essa função trabalha de forma parecida com a do setTimeout(), trazendo como primeiro parametro a função a ser executada e o tempo de execução, mas a principal diferença deles dois é que o setInterval() não irá parar de executar a função, ele irá trazer uma especie de looping infinito, retornando o resultado que você definiu através de uma função, juntamente com o tempo de espera para a execução sem parar.

function executeMessage() {
  document.write('Executando a mensagem...');
};

setInterval(executeMessage, 3000) // Irá executar a mensagem da função sem nenhuma pausa.

Para que você consiga pausar esse looping que o setIntervalretorna, é nescessário criar uma funcionalidade para isso, como um botão para pausar/parar por exemplo, ou até o uso do clearInterval() resolve, mas para isso você deverá passa-lo dentro de uma variável para que ele consiga parar de executar, como no exemplo abaixo (a definição do comportamento de inicialização e termino ficará ao seu critério).

 let timer =  setInterval(executeMessage, 3000);

No exemplo citado, o que eu fiz foi criar uma variável chamada timer e faze-la receber a função que o setIntervalirá executar, e para exemplificar o uso do clearInterval, eu esperei alguns segundos para que ela pudesse executar algumas mensagens e logo em seguida o defini passando o valor da variável que foi criada agora pouco, fazendo com que desta forma, neste exemplo, ele pare de executar o looping que o setInterval trás.

OBS: Lembrado que se o clearIntervalfor definido ao mesmo tempo que o setInterval, ele já irá parar a função antes que ela execute, então para ver ela executando e testando essa funcionalidade, ele deverá ser setado um tempo depois da execução da mensagem.