Yielding Example

by James Hughes

HTML

<h2>setTimeout</h2>
<a href="javascript:;" onclick="doProcessing(); return false;" class="button">Process</a>
<div id="progress-meter" class="status_msg">Ready</div>
Test Input: <input type="text"/>

CSS

body {
font-family: Verdana;
}
.button {
border: 1px solid black;
background: #fff;
padding: 5px;
color: black;
text-decoration: none;
}
.button:hover{
background: #ddd;
}
.status_msg {
color: #999;
margin-top: 0.5em;
font-size: 18pt;
}
h2 {
    margin-bottom: 10px;
}

JavaScript

(function(){
  function doProcessing(){
    var el = document.getElementById("progress-meter");
    el.innerHTML = "Processing";
    setTimeout(function(){
      for(var i = 0; i < 99999999; i++){
        var j = Math.round(Math.sqrt(i));
      }
      el.innerHTML = "Done!";
    },0);
  }

  window.doProcessing = doProcessing;
}())