title: How to ensure HTML form elements visibly update before executing javascript events
body: <p>I have found that events like .click and .change, if they result in some processing that takes significant time (like a second or two) actually delay the screen update, so the user does not see e.g. the radio button select move until after some time. This is of course a big no-no in terms of user experience. The button should change at once, and the cursor indicate if there is a wait going on.</p>
  
  <p>Example: <a href="http://jsfiddle.net/needlethread/uFjZf/1/" rel="nofollow">http://jsfiddle.net/needlethread/uFjZf/1/</a></p>
  
  <pre><code>$('[name="myradio"]').change(function() {
    delay();                              // one second of code execution
    $("#aaa").html("myradio changed");    // happens same time as radio moves 
  });
  </code></pre>
  
  <p>What is the best way to ensure that the button visibly changes as soon as the user clicks on it? I tried the .click event, same thing.</p>