I have a renderText() function that fills out the canvas with text (ctx.fillText(char, charLocation, 400)). I want it to render the text, pause for 2 seconds, and render new text.
Workaround:
renderText();
setTimeout(() => {
renderNewText();
}, 2000);
This solution is fine for now, but what if I want to decrease it to 0.1 seconds, and renderText() takes more than 0.1 seconds to execute, resulting in renderNewText() executing before renderText()? How can I, for sure, wait until renderText() is finished with fillText before pausing however long I want to pause?
What I know: I'm aware that canvas and context render entirely synchronously; as such, renderText() doesn't return any promises and all the methods called on the context continue even after exiting renderText(). Also, there are no events that can signal when it's done, at least according to all the comments and threads I've read. In all the solutions I've looked up on Stack Overflow, the answer is pretty much "You can't", but I find that hard to believe.
I'm sure there must be something I'm really not getting here, probably the event loop or Promises or something else.
From @towc's comment
canvas api calls are asynchronous, sure, but they're queued, so the order is preserved. To know more about this, read up on the event loop. If you have a race condition, it's somewhere else
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments