<html>
<head>
<title>Lazy Evaluations and async Demonstration - RJM Programming - October, 2023 ... thanks to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function</title>
<script type='text/javascript'>
var aminterested='';

function resolveAfter20Seconds() {
consolelog("starting slow promise");
return new Promise((resolve) => {
setTimeout(() => {
aminterested='Just';
resolve("slow");
consolelog("slow promise is done");
aminterested='';
}, 20000);
});
}

function resolveAfter10Second() {
consolelog("starting fast promise");
return new Promise((resolve) => {
setTimeout(() => {
aminterested='Just';
resolve("fast");
consolelog("fast promise is done");
aminterested='';
}, 10000);
});
}

async function sequentialStart() {
consolelog("== sequentialStart starts ==");
setTimeout(() => { document.getElementById('twoslowonefast').style.opacity='1.0'; }, 1000);

// 1. Start a timer, log after it's done
const slow = resolveAfter20Seconds();
consolelog(await slow);

// 2. Start the next timer after waiting for the previous one
const fast = resolveAfter10Second();
consolelog(await fast);

consolelog("== sequentialStart done ==");
document.getElementById('twoslowonefast').style.opacity='0.3';
}

async function sequentialWait() {
consolelog("== sequentialWait starts ==");
document.getElementById('twologslowthenfast').style.opacity='1.0';

// 1. Start two timers without waiting for each other
const slow = resolveAfter20Seconds();
const fast = resolveAfter10Second();

// 2. Wait for the slow timer to complete, and then log the result
consolelog(await slow);
// 3. Wait for the fast timer to complete, and then log the result
consolelog(await fast);

consolelog("== sequentialWait done ==");
document.getElementById('twologslowthenfast').style.opacity='0.3';
}

async function concurrent1() {
consolelog("== concurrent1 starts ==");
document.getElementById('threelatertwologslowthenfast').style.opacity='1.0';

// 1. Start two timers concurrently and wait for both to complete
const results = await Promise.all([
resolveAfter20Seconds(),
resolveAfter10Second(),
]);
// 2. Log the results together
consolelog(results[0]);
consolelog(results[1]);

consolelog("== concurrent1 done ==");
document.getElementById('threelatertwologslowthenfast').style.opacity='0.3';
}

async function concurrent2() {
consolelog("== concurrent2 starts ==");
document.getElementById('onelogfastoneslow').style.opacity='1.0';

// 1. Start two timers concurrently, log immediately after each one is done
await Promise.all([
(async () => consolelog(await resolveAfter20Seconds()))(),
(async () => consolelog(await resolveAfter10Second()))(),
]);
consolelog("== concurrent2 done ==");
document.getElementById('onelogfastoneslow').style.opacity='0.3';
}

function consolelog(blb) {
if (aminterested.toLowerCase() == 'just') {
setTimeout(() => { document.getElementById('status').innerHTML+=' <br>' + aminterested + ' started call of consolelog("' + blb + '") at ' + (new Date()) + ' ... '; }, 1000);
}
console.log(blb);
if (aminterested.toLowerCase() == 'just') {
setTimeout(() => { document.getElementById('status').innerHTML+=' <br>' + aminterested + ' finished call of consolelog("' + blb + '") at ' + (new Date()) + ' ... '; }, 1000);
}
}

sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"

// wait above to finish
setTimeout(sequentialWait, 4000); // after 2 seconds, logs "slow" and then "fast"

// wait again
setTimeout(concurrent1, 7000); // same as sequentialWait

// wait again
setTimeout(concurrent2, 10000); // after 1 second, logs "fast", then after 1 more second, "slow"
</script>
</head>
<body>
<h1>Lazy Evaluations and async Demonstration</h1>
<h2>RJM Programming - October, 2023 ... thanks to <a target=_blank href='//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function'>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function</a></h2>
<h2>The h3 elements below fade as they are achieved ...</h3>
<h3 id=twoslowonefast style=display:block;opacity:0.1;>After 20 seconds, logs "slow", then after 10 more second, "fast"</h3>
<h3 id=twologslowthenfast style=display:block;opacity:0.1;>After 20 seconds, logs "slow" and then "fast"</h3>
<h3 id=threelatertwologslowthenfast style=display:block;opacity:0.1;>Three seconds later, after 20 seconds, logs "slow" and then "fast"</h3>
<h3 id=onelogfastoneslow style=display:block;opacity:0.1;>After 10 second, logs "fast", then after 10 more second, "slow"</h3>
<hr></hr>

<span id=status></span>
</body>
</html>