anchor.diff:  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
   <script>
   function onClick (){
  -   var start = $('#start');
  -   start.attr("disabled",true);
  +   disableButton();
      clearMessage();
  -   start.after("<div id='loading'>Wait for it... <img src='/img/ajax-loader.gif'></div></br>");
  -      setTimeout(function() {
  -	toggleControls();
  -      } , 3000 );
  +   showDelay();
  +   pauseThenToggleControls();
  +};
  +
  +function disableButton() {
  +   $('#btn').attr("disabled",true);
   };
   
   function clearMessage() {
  
positive.code:     }
  };
  
  function toggleControls() {
    var start = $('#start').first();
    var check = $('#checkbox').first();
    var load = $('#loading');
    if ( start.text() == "Remove") {
         check.remove();
         start.text("Add");
         start.after("<p id='message'>It's gone!</p>");
         start.attr("disabled", false);
         load.hide();
    }else{
         start.text("Remove");
         start.after("<div id='checkbox'><input type='checkbox' id='checkbox'> A checkbox </div>");
         start.after("<p id='message'>It's back!</p>");
         start.attr("disabled", false);
         load.hide();
      }
   };
  
negative.code:    <p>Demonstrates controls that are added or removed after an async call.</p>
  
     <form >
         <button autocomplete="off" type="button" id="btn" onclick="onClick()" >Remove</button>
         <div id="checkbox">
  	  <input type="checkbox" id="checkbox" > A checkbox
         </div>
  