It looks as if I’ll be spending another day bashing my head against a JavaScript brick wall. My problem is simple: I want one thing to follow another, as in:
1. First, let’s draw the page.
2. Next, let’s wait for the user to push the ‘Submit’ button.
3. Then, let’s draw the next page.
Now, anywhere else, this would be trivially simple. It would be an automatic result of writing the code in a sequence. You know, line 432 executes after line 431—that kind of thing. But no, JavaScript is far too powerful to do anything so obvious.
Now, I understand that JavaScript is designed to operate over the Internet, where lots of things require calls to resources anywhere on the Internet, that could take anything from a few milliseconds to several minutes to infinite time to complete. JavaScript is designed to be able to cope with this kind of problem seamlessly, where the ancient languages I like to use (you know, digital hieroglyphics) would die an ignominious death. OK, I get that. But still… do we have to make EVERYTHING difficult? Can’t we do just a few things the simple, obvious way? Apparently not.
I have trekked far and wide over the Internet searching for a solution. I have struggled over high digital mountain passes, slogged across scorching Internet deserts, and sailed across forbidding Web seas. I have encountered all manner of strange and wondrous peoples offering exotic solutions—but alas, none of them work.
Wait Flag
One tribe, for example (they have bones stuck through their noses), recommend a common approach used in other languages. They set a flag (they call it “waitFlag”) to true, then nest step #2 in a while loop, like so:
1. First, let’s draw the page.
2. waitFlag = true;
3. Meanwhile, back at the ranch, when we process pressing the ’Submit’ button, set waitFlag = false;
4. only when waitFlag = false, do we draw the next page.
Seems simple and obvious, right? It works just fine in just about every language I know, but alas, JavaScript is too powerful to do this. I tried all sorts of variations on this scheme: while-do structures, do-while structures, if-then structures, but JavaScript is too smart to be fooled by such puerile tricks.
Promises, promises
Another tribe (this one throws virgins into volcanoes to insure good rains) has a powerful feature called “Promise”. It is obviously designed for precisely this problem. Unfortunately, the sample code they offer doesn’t work.
while (cLoops < 1000) { // this limits the number of attempts to less than 1,000
a.innerHTML =''; // clear the page
selectEncounter(); // select the next Encounter
drawPage(); // draw it
let result = await makePromise(); //wait for the user to press the button
}
This generates the following error message:
Unexpected identifier 'makePromise'. Expected ';' after variable declaration
Yes, I tried it without the parens after makePromise. I also tried it with a smiley face emoticon:
let result = await makePromise(😀); //wait for the user to press the button
alas, that didn’t work either.
Here’s the code a little lower for makePromise:
let makePromise = new Promise(function(resolve, reject) {
resolve(123);
});
This is called from the end of the button-pressed processing routine with this line of code:
makePromise();
Awaiting an answer
A third tribe speaks in whispered songs that sound beautiful, but use words I’ve never heard before. They like something called “Asynch/Await”. Just for fun, I simply pasted their code into my own and ran it to see what happened. Nothing happened. I think it was waiting for an input from a non-existent source.
A dinosaur forever wandering
It appears that, once again, I’m befuddled. I’ll have to ask for help.
Later that day…
Paul Eres quickly responded to my request for help and suggested that I make sure to declare the makePromise function before calling it. I made the correction, but it didn’t seem to help. Here’s the code:
let makePromise = new Promise(function(resolve, reject) {
resolve(123);
});
while (cLoops < 1000) { // this limits the number of attempts to less than 1,000
a.innerHTML =''; // clear the page
selectEncounter(); // select the next Encounter
drawPage(); // draw it
let result = await makePromise(); //wait for the user to press the button
}
This generates the same old error message as before:
Unexpected identifier 'makePromise'. Expected ';' after variable declaration
I next inserted the parentheses pair to get more conventional:
let makePromise() = new Promise(function(resolve, reject) {
resolve(123);
});
while (cLoops < 1000) { // this limits the number of attempts to less than 1,000
a.innerHTML =''; // clear the page
selectEncounter(); // select the next Encounter
drawPage(); // draw it
let result = await makePromise(); //wait for the user to press the button
}
and it gave a different error message:
Unexpected token '('. Expected ';' after variable declaration
So apparently the parentheses made matters worse. I’ll try all sorts of other random re-arrangements.
Later, at night…
I have studied at least a dozen pages on the web purporting to explain Promises and the Asynch-Await structure. None of them make sense. Even worse, not ONE of them provides a working example. They all give little snippets of code that are guaranteed to work inside the appropriate program, but they never explain what that appropriate program might be. They all bring in undeclared variables. For example, here’s something I encountered:
let promise = new Promise(function(resolve, reject) {
if(promise_kept)
resolve("done”);
else
reject(new Error("…"));
});
What is “promise_kept”? Where does it come from? Who knows?
I’m going to bed. Harrumph!