<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 resolveAfter2Seconds() {
consolelog("starting slow promise");
return new Promise((resolve) => {
setTimeout(() => {
aminterested='Just';
resolve("slow");
consolelog("slow promise is done");
aminterested='';
}, 2000);
});
}
function resolveAfter1Second() {
consolelog("starting fast promise");
return new Promise((resolve) => {
setTimeout(() => {
aminterested='Just';
resolve("fast");
consolelog("fast promise is done");
aminterested='';
}, 1000);
});
}
async function sequentialStart() {
consolelog("== sequentialStart starts ==");
// 1. Start a timer, log after it's done
const slow = resolveAfter2Seconds();
consolelog(await slow);
// 2. Start the next timer after waiting for the previous one
const fast = resolveAfter1Second();
consolelog(await fast);
consolelog("== sequentialStart done ==");
}
async function sequentialWait() {
consolelog("== sequentialWait starts ==");
// 1. Start two timers without waiting for each other
const slow = resolveAfter2Seconds();
const fast = resolveAfter1Second();
// 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 ==");
}
async function concurrent1() {
consolelog("== concurrent1 starts ==");
// 1. Start two timers concurrently and wait for both to complete
const results = await Promise.all([
resolveAfter2Seconds(),
resolveAfter1Second(),
]);
// 2. Log the results together
consolelog(results[0]);
consolelog(results[1]);
consolelog("== concurrent1 done ==");
}
async function concurrent2() {
consolelog("== concurrent2 starts ==");
// 1. Start two timers concurrently, log immediately after each one is done
await Promise.all([
(async () => consolelog(await resolveAfter2Seconds()))(),
(async () => consolelog(await resolveAfter1Second()))(),
]);
consolelog("== concurrent2 done ==");
}
function consolelog(blb) {
if (aminterested.toLowerCase() == 'just') {
document.getElementById('status').innerHTML+=' <br>' + aminterested + ' started call of consolelog("' + blb + '") at ' + (new Date()) + ' ... ';
}
console.log(blb);
if (aminterested.toLowerCase() == 'just') {
document.getElementById('status').innerHTML+=' <br>' + aminterested + ' finished call of consolelog("' + blb + '") at ' + (new Date()) + ' ... ';
}
}
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>
<span id=status></span>
</body>
</html>