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

by

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

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

Edit:

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
}

More Related Contents:

  1. jQuery document.createElement equivalent?
  2. How can I apply a jQuery function to all elements with the same ID?
  3. When should I use jQuery’s document.ready function?
  4. How to get a DOM Element from a jQuery selector?
  5. Difference between HTMLCollection, NodeLists, and arrays of objects
  6. How do I create a link using javascript?
  7. How to show Page Loading div until the page has finished loading?
  8. Difference between “change” and “input” event for an `input` element
  9. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  10. How to bind bootstrap popover on dynamic elements
  11. How to find a parent with a known class in jQuery?
  12. jQuery count child elements
  13. jQuery: how to change tag name?
  14. JavaScript: DOM load events, execution sequence, and $(document).ready()
  15. How can I remove all CSS classes using jQuery/JavaScript?
  16. Count immediate child div elements using jQuery
  17. How to move table row in jQuery?
  18. JavaScript scrollTo method does nothing?
  19. Select div using wildcard ID
  20. Convert String to XML Document in JavaScript
  21. JavaScript moving element in the DOM
  22. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  23. JQuery html() vs. innerHTML
  24. Attaching events after DOM manipulation using JQuery ajax
  25. How to properly unload/destroy a VIDEO element
  26. How to get on-screen visible element objects in jQuery? [duplicate]
  27. How to add a onclick event to an element using javascript
  28. Test if an element can contain text
  29. How to check null objects in jQuery
  30. Screen Coordinates of a element, via Javascript

Leave a Comment