JSFiddle - React, Tailwind, and code Playground

by darkstarsys

HTML

<div id="log">
<h1>
Log
</h1>
</div>

JavaScript

function log(msg) {
 document.getElementById("log").innerHTML += msg + "<br>"
}

wakeup = null;
// returns a promise that will be resolved by calling wakeup()
// (could be a list of these or whatever, this is just a simple demo)
function wakeable() {
	return new Promise( (resolve, reject) => {
    log("(wakeable: creating Promise, setting <tt>wakeup</tt> to resolve function)")
		wakeup = () => { log("wakeup: Woke up!"); resolve(true); log("wakeup: after resolve") }
	})
}
// demo of waiting and getting woken up:
async function handle_event() {
	while (true) {
		log("waiting…")
		await wakeable() // returns to event loop here
		log("handle_event: await returned OK!")
	}
}

handle_event() // start in "background"
log("main: about to call wakeup")
wakeup() // wake it up
setTimeout(_ => { wakeup(); }, 2000) // wake it up again after a delay
log("Reached end of source file")