Leokuma/promiseAnimation.htm

## promiseAnimation.htm
<html>
	<head>
		<title>Promise e animações</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"/>
		</style>
	</head>
	<body style='margin: 0px; display: flex; flex-direction: column; justify-content: center; height: 100%; align-items: center; font-family: Montserrat, sans-serif;'>
		<div id='divAnimada' style='transition: 2s; opacity: 1; font-size: 56px;'>OPACIDADE</div>
		<div style="display: flex; flex-direction: column;">
			<button type='button' onclick='botaoSemEspera()'>Promise</button>
			<button type='button' onclick='botaoComEsperaInterromperJS()'>async / await</button>
			<button type='button' onclick='botaoComEspera()'>Promise.then()</button>
		</div>
		<script>
			function botaoSemEspera() {
				animar();
				alert('Mudei a opacidade e não esperei a animação terminar para exibir este alerta. A Promise pode ainda estar em execução ou pode já ter terminado, não sei, não tenho controle. Não faz muito sentido usar Promise nessa situação, pois animações e transições são nativamente assíncronas. Usar Promise assim dá no mesmo de não usar, pois o JS não esperaria a animação terminar de qualquer forma.');
			}

			async function botaoComEsperaInterromperJS() {
				await animar();
				alert('Mudei a opacidade e interrompi a execução do JS até que a animação terminasse. Só então exibi este alerta.');
			}


			function botaoComEspera() {
				animar().then(() => alert('Agora sei que já terminou. Deixei "agendado" (Promise.then) para exibir este alerta no final. Enquanto isso, continuei rodando o JS de forma concorrente. O alerta que você acabou de ver foi exibido APÓS a Promise ser chamada. Como transições e animações são assíncronas nativamente, o alerta anterior seria exibido de qualquer maneira. Se fosse um evento síncrono - um laço demorado, por exemplo -, só Promise ou Worker possibilitariam exibir o alerta antes de o código terminar.'));
				alert('Acabei de mudar a opacidade. Provavelmente a animação não terminou a ainda.');
			}

			function animar() {
				return new Promise((resolve, reject) => {
					document.querySelector('#divAnimada').addEventListener('transitionend', resolve, {once: true});
					let opacidade = document.querySelector("#divAnimada").style.opacity;
					document.querySelector("#divAnimada").style.opacity = (+opacidade ? 0 : 1);
				})
			}
		</script>
	</body>
</html>
	<html>
	<head>
	<title>Promise e animações</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"/>
	</style>
	</head>
	<body style='margin: 0px; display: flex; flex-direction: column; justify-content: center; height: 100%; align-items: center; font-family: Montserrat, sans-serif;'>
	<div id='divAnimada' style='transition: 2s; opacity: 1; font-size: 56px;'>OPACIDADE</div>
	<div style="display: flex; flex-direction: column;">
	<button type='button' onclick='botaoSemEspera()'>Promise</button>
	<button type='button' onclick='botaoComEsperaInterromperJS()'>async / await</button>
	<button type='button' onclick='botaoComEspera()'>Promise.then()</button>
	</div>
	<script>
	function botaoSemEspera() {
	animar();
	alert('Mudei a opacidade e não esperei a animação terminar para exibir este alerta. A Promise pode ainda estar em execução ou pode já ter terminado, não sei, não tenho controle. Não faz muito sentido usar Promise nessa situação, pois animações e transições são nativamente assíncronas. Usar Promise assim dá no mesmo de não usar, pois o JS não esperaria a animação terminar de qualquer forma.');
	}

	async function botaoComEsperaInterromperJS() {
	await animar();
	alert('Mudei a opacidade e interrompi a execução do JS até que a animação terminasse. Só então exibi este alerta.');
	}


	function botaoComEspera() {
	animar().then(() => alert('Agora sei que já terminou. Deixei "agendado" (Promise.then) para exibir este alerta no final. Enquanto isso, continuei rodando o JS de forma concorrente. O alerta que você acabou de ver foi exibido APÓS a Promise ser chamada. Como transições e animações são assíncronas nativamente, o alerta anterior seria exibido de qualquer maneira. Se fosse um evento síncrono - um laço demorado, por exemplo -, só Promise ou Worker possibilitariam exibir o alerta antes de o código terminar.'));
	alert('Acabei de mudar a opacidade. Provavelmente a animação não terminou a ainda.');
	}

	function animar() {
	return new Promise((resolve, reject) => {
	document.querySelector('#divAnimada').addEventListener('transitionend', resolve, {once: true});
	let opacidade = document.querySelector("#divAnimada").style.opacity;
	document.querySelector("#divAnimada").style.opacity = (+opacidade ? 0 : 1);
	})
	}
	</script>
	</body>
	</html>