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

set it to processing, then do a setTimeout to prevent the cpu intensive task from running until after the div has been updated.

<!DOCTYPE html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
    document.getElementById('msg').innerHTML = 'Processing JS...';
         start = new Date();
         end = addSecs(start,5);
         do {start = new Date();} while (end-start > 0);
         document.getElementById('msg').innerHTML = 'Finished Processing';   
$(function() {
    <div id="msg">Not Started</div>
    <a href="#" onclick="doRun()">javascript</a>

you can modify the setTimeout delay as needed, it may need to be larger for slower machines/browsers.


You could also use an alert or a confirm dialog to allow the page time to update.

document.getElementById('msg').innerHTML = 'Processing JS...';
if ( confirm( "This task may take several seconds. Do you wish to continue?" ) ) {
     // run code here

Leave a Comment