How to ensure HTML form elements visibly update before executing javascript events
<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>
