Tag: SetInterval

Publicado em

Exercício fácil – função setInterval()

Você sabe utilizar o temporizador setInterval?

O setInterval é uma função temporizadora do JavaScript. Ela é utilizada para executar uma função de retorno após um determinado tempo a ser estipulado. É uma função que executará infinitamente na sua página, a menos que você estipule uma função de pausa, chamada clearInterval() ou que você feche a página. É uma função que deve ser utilizada com cuidado pois, se uma pausa não for estipulada, poderá levar a uma sobrecarga de memória e causar travamento e lentidão na sua página web.

Requisitos:

para este exerício, será necessário conhecimento das funções setInterval e clearInterval. Caso você ainda não tenha lido o artigo sobre como utilizar o setInterval e o clearInteval, acesse o link: Como usar o setInterval

Exercício:

Utilizando os seus conhecimentos em JavaScript e temporizadores, crie uma função que utilize o temporizador setInterval() e o clearInterval() para criar um loop que exiba a mensagem “Este é um exemplo de contador, estamos no número:  x“.

Onde:  X é o número atual no contador.

Observação:

Esta mensagem deverá aparecer no console vinte vezes e a cada três segundos, ou seja, o contador também deverá aumentar um número a cada três segundos.

PARTE 1:

Você deverá criar duas variáveis. Crie uma variável para o contador e uma variável para o limite, que servirá para estipular um limite de contagem:

// Crie as variáveis para o contador e limite
// respectivamente. Elas servirão para estipular
// a quantidade de vezes que a mensagem será exibida
let contador;
let limite;

PARTE 2:

Crie uma variável para o temporizador. Esta variável irá receber a função setInterval() e, dentro da função setInterval(), você deverá criar uma condicional que irá estipular quando a função clearInterval() será utilizada.

// Criando uma variável para o temporizador, use a função
// setInterval, para definir o tempo que levará para a 
// mensagem ser exibida.
let timer = setInterval(function(){
    // Dentro da função, estipule um clearInterval
    // que deverá ser executada quando o contador chegar ao limite
    // Para isso, utilize uma estrutura condicional
    if (){
        clearInterval();
    }
})

Resolução:

O seu console.log ficará assim:

Gostou deste exercício? Conseguiu resolvê-lo facilmente? Deixe o seu comentário abaixo!

Publicado em

Como usar o setInterval

setInterval e clearInterval():

O setInterval() é uma função temporizadora. Ela executa uma função de retorno após determinado tempo. A função setInterval() executará infinitamente, até que você execute a função clearInterval().

Se você é iniciante, você pode pular a explicação Como funciona.

Como funciona?

Sendo uma função assíncrona, a instrução a ser executada é lançada no Event Loop. Mas o que é Event Loop? É uma instrução síncrona, ou seja, quando ela estiver executando, a thread ficará bloqueada e, assim que terminar, a próxima instrução é executada. Como o setInterval() executará infinitamente, sabemos que ele adicionará uma instrução ao Event Loop a cada quantia de tempo que for definida.

Definição:

O setInterval() chama uma função em intervalos de tempo definidos. Ele continuará chamando a função até que o clearInterval() seja chamado, ou que a página seja fechada.

Sintaxe:

// sintaxe da função setInterval, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setInterval(function, miliseconds, parameter1, parameter2, …);
Onde:

function: é a função que será executada;

miliseconds: é o intervalo em milisegundos(ms) em que o código será executado. Se o valor especificado for menor que 10, o valor 10 será utilizado.

parameter: parâmetros para passar para a função.

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval() e clearInterval()</title>
</head>

<body>
    <button id="btn">Clique aqui para iniciar</button>
    <script src="main.js"></script>
</body>

</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;

O clearInterval() limpa o timer configurado pela função setInterval(). Ele desativa a função e não executa a função definida pelo temporizador.

Sintaxe:

// Função clearInterval travará a execução do setInterval
// bloqueando a ação definida pelo temporizador
clearInterval(id_do_setInterval)

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval() e clearInterval()</title>
</head>
<body>
    <button id="btn">Clique aqui para iniciar</button>
    <button id="btn2">Clique aqui para parar</button>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função que será executada para bloquear
// a ação do temporizador definido no setInterval
function pararFuncao() {
    clearInterval(variavel);
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;
document.getElementById("btn2").onclick = pararFuncao;

Gostou deste artigo? Deixe o seu comentário abaixo: