That seems like a super cool idea! Its like the menu from SSX Tricky
Also also thanks for the kind words about my nav lift... so many people complained when it was first added
(Though that was mostly due to an obnoxious beep I added) ~ I feel like alien bugs would live in this menu and they would eat glowing energy juice from the city pipes and city workers would have to come down and scare them away, and then one of them would uncover the ancient ruin, and it would turn out there had been an old city jail where a super villain was frozen and they would accidentally thaw him and then he would create a super bug army. ANYWAY that doesn't answer your question.
Sooo when a webpage loads, the code runs like a thread, from start to finish. Async functions are like adding extra smaller threads alongside the webpage loading, so you can weave a more complex program. They are especially useful if you want to add a time delay, or have something that waits for a while before happening.
To make a function run asynchronously, just add the word "async" before "function"; from that point on any time you run that function; it will, create its own thread, run that function in that thread, then the thread will disappear when the function finishes running.
Obvs this can become quite messy and complex, so you really need to think about what threads you are creating, why you need them to be in a thread, and how you will make sure to close your threads by finishing your function.
The benefit of course is that anything that happens in a thread is actually processed in a different part of your computers CPU/processor, meaning things that happen in one thread wont cause your main script to stop or slow down; and many threads can run simultaneously because your CPU has many processor cores. (In reality its a bit more complex, but you get the idea).
In the case of my elevator script, I used this bit of code:
window.onload = async function () {
await sleep(8000);
window.open("/hidden/loading-error.html", "main");
};
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
The code does the following things:
- When the main window (your browser) finishes lowing the elevator page, it will trigger an event.
- That event will create a new thread, and run a function in the thread.
- That function will call another function called "sleep" and it will wait for it to return something.
- When it awakes from its sleep, it will change the URL to the error page.
There is an extra function "sleep", that returns a Promise; a promise is exactly what it sounds like; it's a promise that something will happen in the future. So the sleep function is promising that it will do something in the future if you wait for it. Its a bit like if you sat at home waiting for your friend to call; doing that would be crazy if you didn't expect your friend to call, but if they had promised they would, then it would be quite reasonable to wait for them! Code feels the same way!
NOW, in reality this is only part of my elevator script; my nav.html also has its own function running that is set to replace the contents of the main window before this script has a chance to finished waiting for 8000 milliseconds; if that happens, this page is obliterated by the new page; the promise becomes irrelevant, and the error page never loads.
The key things you need to remember are the "async function" creates a function that will exist in its own thread. "await" allows a function that is within a thread to pause and wait for something to be returned; And a "Promise" is a special kind of object you can return from a function to let another function know that it's worth waiting for.
I suppose it's also worth mentioning the idea of callbacks since they are very useful in asynchronous code! A callback is a function that your async function will call when it is finished processing or waiting. For example, say you had an async function that downloaded an image and you want to display that image on your webpage using a non async function. Your async function would download the image (this might be fast or slow depending on the person speed etc), then when it finished, it would call your non async function to say "Hey I have an image here, do your thing"!
That would like like this: (In reality this code is pointless since browser can load images anyway, but it's just an example!)
function loadImage(imageData) {
document.getElementById('myImageTag').src = imageData;
}
async function downloadImage(url, callback) {
//Code that downloads the image etc
//When done notify the callback
callback(imageData);
}
//Run the program
downloadImage('bob.jpg', loadImage);
ANYWAY, hopefully that helps explain async!! Im not sure if its the correct thing for your situation, however it good to know anyway
I would also say don't be discouraged if you found this hard to follow, threaded coding is considered to be the most complex kind of coding and it can be very difficult to grasp even for experts! However with a bit of trial and error, and lots of patience you can do it!
Posts & Arts: 92/1k.beats
Author
