Add Class with spinner before moving on

Question

I am trying to write a code to solve certain items after the user clicks enter. Sometimes, this can take a while, so I am making the div look like a spinner so that the user knows that it is working.

To accomplish this, I am adding a class to the DOM object being solved which makes it look like a spinner. My problem is that solve algorithm is completed before the class is added. I have tried a number of different ways to resolve the issue and all have failed. This includes various implementations of the deferred object and the promise method.

Is there any way to ensure that DOM manipulation is complete before moving on in your code?

Answer 1

Yes, wrap your slow code in a zero timeout. This will allow the UI to catch up before executing it.

window.setTimeout(function() { ... your code ...},0);

See: Why is setTimeout(fn, 0) sometimes useful?

Answer 2

First add the spinner, than start your time-consuming code. It looks like (you didn't provide any code) you're doing it in the opposite order.