setTimeout e setInterval

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar um pouco sobre os métodos setTimeout e setInterval.

setTimeout

O método setTimeout é usado para executarmos uma função após um determinado tempo, es…


This content originally appeared on DEV Community and was authored by Fernando Junior

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar um pouco sobre os métodos setTimeout e setInterval.

setTimeout

O método setTimeout é usado para executarmos uma função após um determinado tempo, esta função será executada uma única vez.

Este método recebe dois argumentos:

  • 1: A função que será executada após o tempo informado
  • 2: O tempo que deve ser esperado para executar a função do primeiro argumento, esse tempo deve ser informado em milissegundos.
setTimeout(() => {
 console.log('Execução do setTimeout!')
}, 2000)

Levando em consideração o código de exemplo acima, após o carregamento da página, será aguardado 2 segundos para executar a função, que no nosso caso é apenas informar no console a string Execução do setTimeout.

setInterval

Já o método setInterval, é usado para ficar executando uma função no intervalo de tempo que foi determinado.

Este método também recebe dois argumentos:

  • 1: A função que ficará sendo executada
  • 2: De quanto em quanto tempo essa função será executada, também em milissegundos.
setInterval(() => {
 console.log('Execução do setInterval!')
}, 2000)

Observando o código de exemplo acima, a função passada como primeiro argumento ficará sendo executada a cada 2 segundos, logo, a cada 2 segundos será impresso no console a string Execução do setInterval!.

Desta forma, esse setInterval ficará sendo executado indefinidamente, pois não foi informado um momento para que esse execução seja parada.

Para fazermos isso, devemos usar um método chamado clearInterval. Observe o código abaixo:

let counter = 0

const timer = setInterval(() => {
 console.log('Execução do setInterval!')
 counter++

 if (counter === 5) {
  clearInterval(timer)
 }
}, 2000)

Como pode ser observado acima, usei o método clearInterval para parar a execução do código assim que a variável counter fosse igual a 5.

Com isso, a cada dois segundos será impresso no console Execução do setInterval e a variável counter será incrementada, assim que essa variável atingir o valor 5, cairemos na condição do if e com isso, o método clearInterval será executado, parando a execução da const timer.

Por hoje é isso, espero que estejam curtindo as postagens!

Vou deixar aqui abaixo o link do MDN com a documentação sobre setTimeout e sobre setInterval

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter


This content originally appeared on DEV Community and was authored by Fernando Junior


Print Share Comment Cite Upload Translate Updates
APA

Fernando Junior | Sciencx (2021-04-14T22:39:44+00:00) setTimeout e setInterval. Retrieved from https://www.scien.cx/2021/04/14/settimeout-e-setinterval/

MLA
" » setTimeout e setInterval." Fernando Junior | Sciencx - Wednesday April 14, 2021, https://www.scien.cx/2021/04/14/settimeout-e-setinterval/
HARVARD
Fernando Junior | Sciencx Wednesday April 14, 2021 » setTimeout e setInterval., viewed ,<https://www.scien.cx/2021/04/14/settimeout-e-setinterval/>
VANCOUVER
Fernando Junior | Sciencx - » setTimeout e setInterval. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/14/settimeout-e-setinterval/
CHICAGO
" » setTimeout e setInterval." Fernando Junior | Sciencx - Accessed . https://www.scien.cx/2021/04/14/settimeout-e-setinterval/
IEEE
" » setTimeout e setInterval." Fernando Junior | Sciencx [Online]. Available: https://www.scien.cx/2021/04/14/settimeout-e-setinterval/. [Accessed: ]
rf:citation
» setTimeout e setInterval | Fernando Junior | Sciencx | https://www.scien.cx/2021/04/14/settimeout-e-setinterval/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.