Faça algo depois de um tempo específico
Um dos tipos de espera mais comuns em JavaScript é aquele em que você espera um tempo específico antes de executar qualquer ação.
Por exemplo, digamos que alguém visite seu site. Seria muito chato mostrar a eles um pop-up para se inscrever em seu boletim informativo ou se inscrever em seu canal do YouTube assim que eles carregarem uma página da web. Uma estratégia melhor seria aguardar um determinado período de tempo, como um minuto, e exibir o pop-up.
É muito fácil fazer esse tipo de espera em JavaScript. Tudo o que você precisa fazer é usar o setTimeout() método. Aqui está um exemplo:
1 |
console.log("Hello!"); |
2 |
|
3 |
setTimeout(function() { |
4 |
console.log("Sign Up for the Newsletter"); |
5 |
}, 5000); |
6 |
|
7 |
/* Output
|
8 |
|
9 |
11:01:27.165 Hello!
|
10 |
11:01:32.184 Sign Up for the Newsletter
|
11 |
|
12 |
*/
|
Você pode adicionar esse período de espera onde quiser. Por exemplo, quando um usuário clica em um botão, você pode usar setTimeout() para agir apenas após um período de tempo específico.
1 |
const delay_btn = document.querySelector("button.delay-click"); |
2 |
|
3 |
delay_btn.addEventListener("click", function() { |
4 |
console.log("I was clicked!"); |
5 |
|
6 |
setTimeout(function(){ |
7 |
console.log("I am responding!"); |
8 |
}, 2000); |
9 |
});
|
10 |
|
11 |
/* Output
|
12 |
|
13 |
11:12:31.228 I was clicked!
|
14 |
11:12:33.236 I am responding!
|
15 |
|
16 |
*/
|
No exemplo acima, pudemos detectar o clique assim que aconteceu. No entanto, ainda é possível responder ao clique após algum tempo. O setTimeout() O método garante que a resposta ocorra após 2 segundos.
Faça algo após intervalos de tempo fixos
Digamos que você esteja desenvolvendo um jogo no qual precisa gerar inimigos a cada três segundos ou está criando um aplicativo no qual lembra os usuários de realizar alguma ação a cada 30 minutos. O setInterval() O método funciona muito bem neste caso porque pode executar tarefas repetidamente após um intervalo de tempo fixo entre elas.
Aqui está um exemplo:
1 |
setInterval(function() { |
2 |
console.log("Spawn New Enemy!"); |
3 |
}, 3000); |
4 |
|
5 |
setInterval(function() { |
6 |
console.log("Spawn Power Up!"); |
7 |
}, 4000); |
8 |
|
9 |
/* Output
|
10 |
|
11 |
11:26:19.526 Spawn New Enemy!
|
12 |
11:26:20.520 Spawn Power Up!
|
13 |
11:26:22.529 Spawn New Enemy!
|
14 |
11:26:24.532 Spawn Power Up!
|
15 |
11:26:25.532 Spawn New Enemy!
|
16 |
|
17 |
*/
|
Como você pode ver, um novo inimigo aparece a cada três segundos e um power-up aparece a cada quatro segundos.
Em determinadas situações, você também pode querer parar de executar uma tarefa com base em gatilhos específicos. O clearInterval() método vem em nosso socorro neste caso.
Qualquer chamada para o setInterval() O método retorna um ID de intervalo exclusivo que podemos armazenar em uma variável. Depois disso, podemos interromper a execução repetida desse intervalo passando o ID do intervalo para o clearInterval() método. Você entenderá isso melhor com o exemplo abaixo, onde criamos um cronômetro de contagem regressiva.
1 |
let timer_duration = 100; |
2 |
let timer_interval_id; |
3 |
|
4 |
start_btn.addEventListener('click', function() { |
5 |
timer_interval_id = setInterval(function(){ |
6 |
timer_duration -= 1; |
7 |
|
8 |
heading.innerText = timer_duration; |
9 |
}, 1000); |
10 |
});
|
11 |
|
12 |
stop_btn.addEventListener('click', function() { |
13 |
clearInterval(timer_interval_id); |
14 |
});
|
15 |
|
16 |
reset_btn.addEventListener('click', function() { |
17 |
timer_duration = 100; |
18 |
heading.innerText = timer_duration; |
19 |
});
|
Nosso cronômetro de contagem regressiva está definido para contagem regressiva a partir de 100. Anexamos ouvintes de clique a três botões diferentes. O botão “Start Timer” inicia nossa contagem regressiva com a ajuda do setInterval() método. O código dentro setInterval() é executado a cada segundo e reduzimos o valor de timer_duration por 1 após cada iteração. Este intervalo é então atribuído à variável timer_interval_id.
Nós usamos o clearInterval() método para limpar este intervalo quando o botão “Stop Timer” é pressionado. A seguinte demonstração do CodePen mostra o cronômetro de contagem regressiva em ação:
Aguarde a conclusão de uma tarefa antes de prosseguir
No exemplo anterior, atualizamos o texto dentro de nosso cabeçalho após subtrair 1 de nosso timer_duration. Nossa rubrica foi, portanto, atualizada com nova duração. Tudo isso aconteceu muito rapidamente e os comandos foram executados um após o outro conforme o esperado.
No entanto, algumas operações podem demorar um pouco para serem concluídas. Por exemplo, você pode obter os dados sobre o clima de um local a partir de uma API. Nesse caso, o ideal é aguardar a conclusão da operação de acesso aos dados antes de atualizar a IU.
Agora aprenderemos como esperar a conclusão de uma tarefa antes de prosseguirmos com as execuções de nosso programa. Aqui está um trecho de código simples onde alguns amigos devem se encontrar em um local e depois ir ao cinema juntos.
1 |
function sandy_is_late() { |
2 |
setTimeout(function () { |
3 |
console.log("Sandy reached the spot a little late."); |
4 |
}, 2000); |
5 |
}
|
6 |
|
7 |
function everyone_go() { |
8 |
console.log("Amanda, Liam and John have arrived at the waiting spot."); |
9 |
sandy_is_late(); |
10 |
console.log("Everyone has left for the movies now!"); |
11 |
}
|
12 |
|
13 |
everyone_go(); |
14 |
|
15 |
/* Outputs:
|
16 |
|
17 |
Amanda, Liam and John have arrived at the waiting spot.
|
18 |
Everyone has left for the movies now!
|
19 |
Sandy reached the spot a little late.
|
20 |
|
21 |
*/
|
Quando chamamos o everyone_go() função, esperamos que todos vão ao cinema quando todos os amigos chegarem ao local de espera. No entanto, a execução do código mostra que todos já haviam saído para o filme antes da chegada de Sandy.
Como podemos remediar isso?
Uma solução simples aqui envolve o uso do Promise objeto, bem como async funções e o await palavra-chave. Vou explicar brevemente todos eles aqui.
O Promise O objeto em JavaScript ajuda você a acompanhar todas as tarefas assíncronas em seu programa.
Então, o que são tarefas assíncronas? Algumas tarefas que você implementa na programação podem demorar um pouco para fornecer resultados. Nesses casos, você não deseja que seu programa congele completamente e ainda responda a outros eventos. Isso é feito tornando as tarefas assíncronas.
Isso significa que podemos usar promessas para determinar o estado de nossas tarefas e se elas foram concluídas com sucesso. O async e await palavras-chave nos permite escrever esse código baseado em promessa de maneira clara. Aqui está nosso código atualizado e sua saída:
1 |
function sandy_is_late() { |
2 |
return new Promise((resolve) => { |
3 |
setTimeout(() => { |
4 |
console.log("Sandy reached the spot a little late."); |
5 |
resolve(); |
6 |
}, 2000); |
7 |
});
|
8 |
}
|
9 |
|
10 |
async function everyone_go() { |
11 |
console.log("Amanda, Liam and John have arrived at the waiting spot."); |
12 |
await sandy_is_late(); |
13 |
console.log("Everyone is going to the movies now!"); |
14 |
}
|
15 |
|
16 |
everyone_go(); |
17 |
|
18 |
|
19 |
/* Outputs:
|
20 |
|
21 |
Amanda, Liam and John have arrived at the waiting spot.
|
22 |
Sandy reached the spot a little late.
|
23 |
Everyone has left for the movies now!
|
24 |
|
25 |
*/
|
O everyone_go() função sofreu apenas pequenas alterações. Adicionamos a palavra-chave async antes da função. Isso nos permite usar o await palavra-chave dentro da nossa definição de função. A função everyone_go() também retorna um Promise mas não vamos precisar disso aqui.
O sandy_is_late() função agora retorna explicitamente um Promise que é resolvido após dois segundos devido ao setTimeout() método.
Você deve ter notado que existe uma await palavra-chave antes do nosso sandy_is_late() chamada de função. Isso suspende a execução da função pai até que a promessa seja resolvida. Portanto, era importante para nós chamar resolve() dentro do nosso setTimeout() método.
Depois que a promessa foi resolvida, registramos nossa próxima instrução no console.
Escrevendo uma função de espera em JavaScript
Uma coisa boa sobre as promessas é que podemos chamar o then() método sobre eles quando nossa promessa for cumprida. As funções de retorno de chamada que você fornece a esse método são chamadas quando a promessa é estabelecida.
Esse then() o próprio método retorna um Promise objeto que torna mais fácil manter o encadeamento mais then() métodos e deixe todas as suas tarefas acontecerem de forma sequencial.
Tudo o que precisamos fazer para escrever uma função de espera geral é criar e retornar uma promessa que resolve após um determinado número de segundos. Aqui está um exemplo:
1 |
function wait(t) { |
2 |
return new Promise((resolve) => { |
3 |
setTimeout(resolve, 1000 * t); |
4 |
});
|
5 |
}
|
Nosso wait() A função aceita um único parâmetro que determina o número de segundos que devemos esperar. Depois disso, chamamos setTimeout() com o tempo especificado e fazer uma chamada para resolve() dentro deste método. Isso resolve nossa promessa e abre caminho para quaisquer outras chamadas para then().
1 |
console.log("Hey"); |
2 |
|
3 |
wait(2) |
4 |
.then(() => console.log("Are you free tonight?")) |
5 |
.then(() => wait(2)) |
6 |
.then(() => console.log("Alright, Bye!")); |
7 |
|
8 |
console.log("How are you?"); |
9 |
|
10 |
/* Outputs
|
11 |
|
12 |
18:56:27.228 Hey
|
13 |
18:56:27.230 How are you?
|
14 |
18:56:29.244 Are you free tonight?
|
15 |
18:56:31.249 Alright, Bye!
|
16 |
|
17 |
*/
|
Neste exemplo, usamos nosso wait() função para um atraso de 2 segundos entre o nosso console.log() chamadas. Uma coisa que vale a pena notar é que wait() não interrompe a execução de todo o programa. Nossa última declaração ainda foi registrada logo após “Hey”.
Qualquer coisa que você deseja executar com atraso deve ser agrupada em um then() chamar.
Pensamentos finais
Neste tutorial, aprendemos sobre diferentes formas de espera em JavaScript. A melhor técnica a ser usada dependerá de suas necessidades. Você pode usar o setTimeout() método quando você deseja executar algo após um tempo específico. O setInterval() O método é útil quando você deseja executar algo periodicamente.
Por fim, as promessas são úteis quando você não sabe quanto tempo uma tarefa levará e deseja executar algum código após a conclusão dessa tarefa especificada. Uma vantagem de usar promessas é que elas permitem que você espere a conclusão das tarefas sem congelar todo o programa.
[ad_2]
