Conteúdo
- Visão geral
- Implementação
- Conclusão
Visão geral
Exibir o progresso de várias tarefas conforme elas são concluídas pode ser útil para o usuário, pois indica quanto tempo ele pode precisar esperar para que as tarefas restantes sejam concluídas.
Implementação
Vamos começar com a marcação!
Tudo o que você precisa é de uma tag script para apontar para um arquivo JavaScript (que será implementado abaixo) e um elemento div, cujo texto será manipulado para atualizar o contador de andamento das tarefas concluídas.
<!DOCTYPE html>
Em seguida, o JavaScript!
Começaremos criando uma função que resolve uma promessa após um tempo aleatório.
Fazemos isso porque se assemelha a como funcionará em um aplicativo do mundo real, por exemplo, solicitações HTTP resolvidas em momentos diferentes.
async function task() {
return new Promise(res => {
setTimeout(res, Math.random() * 5000);
})
}
Em segundo lugar, criaremos um array de 100 promessas e atualizaremos o texto de progresso para informar ao usuário quando todas as tarefas forem concluídas.
const loadingBar = document.getElementById('loadingBar');
(async() => {
const promises = new Array(100)
.fill(0)
.map(task);
loadingBar.textContent = Loading...;
await Promise.all(promises);
loadingBar.textContent = Loading Finished;
})();
Agora imagine se isso levar 30 segundos para ser concluído. Tudo o que o usuário verá na tela é o texto 'Carregando...' enquanto estiver em andamento.
Essa não é uma mensagem muito útil!
Vamos melhorar isso agora, atualizando o texto de progresso após a resolução de cada tarefa.
O trecho de código abaixo é a implementação completa.
const loadingBar = document.getElementById('loadingBar');
async function task() {
return new Promise(res => {
setTimeout(res, Math.random() * 5000);
})
}
function loadingBarStatus(current, max) {
loadingBar.textContent = Loading ${current} of ${max};
}
(async() => {
let current = 1;
const promises = new Array(100)
.fill(0)
.map(() => task().then(() => loadingBarStatus(current++, 100)));
await Promise.all(promises);
loadingBar.textContent = Loading Finished;
})();
Agora, você pode ver que conforme cada promessa é resolvida, o contador é incrementado e exibido para o usuário.
Conclusão
Resumindo, tudo o que você precisa fazer é atualizar o progresso à medida que cada promessa é resolvida.
Espero que você tenha achado este breve tutorial útil.
Deixe-me saber seus pensamentos nos comentários abaixo.
Top comments (0)