jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function

Question

What I\'m trying to do is to update a simple div to say \"Processing...\" before executing a CPU-intensive script (it takes 3-12 seconds to run, no AJAX) then update the div

Answer 1

I had to wait for jQuery to manipulate the DOM and then grap the changes (load form fields multiple times into a form, then to submit it). The DOM grew and the insertion took longer and longer. I saved the changes using ajax to have to user to be able to continue where he left off.

This did NOT WORK as intended:

jQuery('.parentEl').prepend('
newContent
');
doSave(); // wrapping it into timeout was to short as well sometimes

Since jQuery functions like .prepend() do continue the chain only when done, the following seemed to do the trick:

jQuery('.parentEl').prepend('
newContent
').queue(function() {
  doSave();
});