Vanilla Javascript - #28 EventLoop, intervalos e tempos

19/06/2019

No tutorial de hoje trabalharemos com eventLoop, setTimeout e setInterval. O Javascript por padrão ele é síncrono, mas existem algumas formas de utilizá-lo de forma assíncrona, vamos ver.

As formas mais comuns de se trabalhar de forma assíncrona é utilizando eventos, setTimeout e setInterval. Veremos abaixo essas formas:

Eventos assíncronos

No html vamos criar um botão:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setTimeout e setInterval</title>
</head>
<body>
    <button id="btn">Click me</button>

    <script src="javascript.js"></script>
</body>
</html>

No JS iremos manipulá-lo:

console.log('Hello');
function counter()
{
    for(let i=0; i<10; i++){
        console.log(i);
    }
}
btn.addEventListener('click',counter,false);
console.log('World');

setTimeout e setInterval

Com o setTimeout e setInterval trabalhamos de forma assíncrona utilizando tempo.

setTimeout(counter,3000);
//setInterval(counter,3000);
function counter()
{
    for(let i=0; i<10; i++){
        console.log(i);
    }
}

Utilizando a forma recursiva

O ideal é utilizarmos o setTimeout de forma recursiva ao invés do setInterval:

let i=0;
function counter()
{
    i++;
    console.log(i);

    if(i >=5){
        return;
    }
    setTimeout(counter,1000);
}
counter();

Repare que no código acima, a própria função chama o setTimeout até certo ponto. No caso acima utilizamos até 5.

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #27 Formulários III - File Preview

Neste tutorial terminaremos as aulas de formulários com Javascript Vanilla. Trabalharemos com input type file.

Vanilla Javascript - #29 Ajax com json

No tutorial de hoje aprenderemos como fazer um requisição ajax em um banco de dados json sem utilização de nenhuma bilbioteca.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.