DEV Community

Discussion on: Retro CRT terminal screen in CSS + JS

Collapse
 
maveric profile image
maveric • Edited

I've made that change, and the execution does not seem to change. I have a "console.log" immediately following the call to updateLives that in fact will not show until it completes. But if I move the mouse, the

wordSpan.addEventListener("mouseenter", handleWordHover);

gets called (as it's on all elements) and seems to interrupt the promise. If I move the mouse, I never get that console.log statement for that call. If that game ends with that interrupted, it won't show the game end typer properly.

I have not been able to find any resources on this type of interaction - an event listener popping off during an await that messes it up - and this whole async/await was not a paradigm when I was coding last. Trying to catch up.

Your help/suggestions would be greatly appreciated but I know this was just a side/learning project, not something you intended to support and won't be offended if you chose not to.

Thread Thread
 
ekeijl profile image
Edwin

If I could look at the code somehow I can help debugging. Can you put it online somewhere like a codesandbox?

Thread Thread
 
maveric profile image
maveric • Edited

The sandbox is at:
codesandbox.io/s/hungry-booth-wyl1...
It really is just your code that I've made some minor bug fixes and personal debug/figure out code to. The same thing happens on the sandbox from this write up as well if it's easier to look at code I haven't put any hack-it-to-figure-it-out code into.

Thread Thread
 
ekeijl profile image
Edwin • Edited

Oh, it was easier than I thought.

I defined the interval variable at the top of the io.js module. Everytime you call type() it will overwrite the interval. I use setInterval to process the queue of characters one by one. So if type() is called while another is still running, only the last one will finish.

Moving the interval variable inside the type() function ensures every promise will execute asynchronously like you expect. Not sure why I wrote it like this in the first place, probably because I thought I would only need 1 typer at the same time, lol.

Thread Thread
 
maveric profile image
maveric

That's fantastic. I'm very glad it was an easy find for you and greatly appreciate you looking into it for me. Works like a charm. That would have taken me ages to find, as I was going down the "how's the promise getting messed up" path.

I've got a lot to learn, but you've got great code for me to follow, so thanks again.