Tutorial setTimeout do JavaScript – Como usar o equivalente em JS de suspensão, espera, atraso e pausa

Início » Tecnologia » Tutorial setTimeout do JavaScript – Como usar o equivalente em JS de suspensão, espera, atraso e pausa


JavaScript é a linguagem da web. JS não é o mesmo desde que o ES5 foi lançado. Mais e mais idéias e recursos estão sendo transportados de diferentes idiomas e integrados ao JavaScript. Um desses recursos é o Promises, que é provavelmente a coisa mais usada no JavaScript após o lançamento do ES5.

Mas uma das coisas que o JavaScript perde é a maneira de “pausar” a execução por um tempo e retomar mais tarde. Neste post, discutirei como você pode conseguir isso e o que realmente significa “pausar” ou “dormir” em JavaScript. Spoiler: JavaScript nunca realmente “pausa”

TL; DR

Aqui está o código copy-pasta que faria o trabalho:

/** *  * @param duration Enter duration in seconds */function sleep(duration) {	return new Promise(resolve => {		setTimeout(() => {			resolve()		}, duration * 1000)	})}

Mas o que realmente está acontecendo aqui?

setTimeout e as falsas promessas

Vamos ver um exemplo rápido usando o snippet acima (discutiremos o que está acontecendo posteriormente)

async function performBatchActions() {	// perform an API call	await performAPIRequest()	// sleep for 5 seconds	await sleep(5)	// perform an API call again	await performAPIRequest()}

Esta função performBatchActions, quando chamado, executaria simplesmente o performAPIRequest função, aguarde cerca de 5 segundose chame a mesma função novamente. Observe como eu escrevi cerca de 5 segundose não 5 segundos.

Uma nota forte para colocar aqui, o código acima não garante um sono perfeito. Isso significa que, se você especificar a duração como, digamos 1 segundo, JavaScript não garante que começaria a executar o código após o sono exatamente após 1 segundo. Por quê? Você pode perguntar. Infelizmente, isso ocorre porque os temporizadores funcionam em JavaScript e, em geral, em loop de eventos. No entanto, o JavaScript garante absolutamente que o trecho de código após o sono nunca seja executado antes no tempo mencionado, para que não tenhamos realmente uma situação indeterminada completa, apenas parcial e, na maioria dos casos, dentro de uma margem de apenas alguns milissegundos.

JavaScript é único thread

Um único thread significa que o processo JavaScript não pode realmente sair do caminho. Ele precisa fazer todas as coisas – de ouvintes de eventos a retornos de chamada HTTP, no mesmo encadeamento principal. E quando uma coisa está sendo executada, outra não pode ser executada. Considere uma página da web em que você tenha vários botões e execute o código acima para simular um sono por, digamos, 10 segundos. O que você espera que aconteça?

Nada mesmo. Sua página da web funcionaria bem, seus botões responderiam e, assim que o sono de 10 segundos terminar, o código ao lado será executado. Portanto, é evidente que o JavaScript realmente não bloqueou todo o encadeamento principal porque, se o fizesse, sua página da Web deveria ter congelado e os botões não teriam cliques. Então, como o JavaScript realmente pausou um único thread, sem realmente pausá-lo?

Conheça o loop de eventos

Ao contrário de outros idiomas, o JavaScript não continua executando código de maneira linear, de cima para baixo. É uma linguagem assíncrona orientada a eventos com toneladas de mágica na forma de loop de eventos. O loop de eventos divide seu código em eventos síncronos e certos – como temporizadores e solicitações HTTP. Precisamente falando, existem duas filas – fila de tarefas e fila de microtask. Sempre que você executa o JS, e há algo assíncrono (como um evento de clique de mouse ou uma promessa), o JavaScript o lança na fila de tarefas (ou na fila de microtask) e continua em execução. Quando ele completa um “tick único” – verifica se as filas de tarefas e a fila de microtask têm algum trabalho para isso. Se sim, ele executará o retorno de chamada / executará uma ação.

Eu realmente recomendaria qualquer pessoa interessada em trabalhar profundamente no loop de eventos para assistir a este vídeo:

Conclusão

Você veio aqui para obter uma instrução simples para dormir em JavaScript e acabou aprendendo sobre uma das principais coisas do JavaScript – loop de eventos! Incrível, não é? Bem, se você gostou do artigo, finalize a compra codedamn – uma plataforma que estou construindo para desenvolvedores e alunos como você. Além disso, vamos nos conectar nas mídias sociais – Twitter e Instagram. Te vejo em breve!

Paz





Fonte

Avalie este post

Clique nas estrelas

Média da classificação 0 / 5. Número de votos: 0

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *