Question

I have some functions in my Javascript code that will perform long operations such as painting various images to a canvas. While these functions are happening, I do not want the user to be able to access buttons on the UI, so I place a large modal div over everything to cover up the buttons while the process is taking place. I soon realized however that since the code is continuous, the UI never actually has a chance to update, and the modal div never actually appears since it is removed at the end of the process.

My question is, is it really necessary to cover up the UI in this type of scenario? If the user does press another button while the operation is being performed, will the new process wait until the previous process is done before starting? Or perhaps since the modal UI was supposed to be up at the moment they clicked the UI, the modal will prevent the new process from starting. The alternative is that I could set a time out directly after bringing the modal div up giving the UI time to update before beginning the process, but I am not sure that this is necessary.

Answer 1

Yes, you need the cover div, and no, new processes won’t wait until the previous process is done before starting (unless you coded them to do so).

A simple trick to force a repaint is to use setTimeout with 0 milliseconds. The re-layout should happen as soon as possible.