title: synchronize/pipe jquery(ajax>success) with user defined function(s)
body: <p>problem:</p>
  
  <ol>
  <li>Fx-1: getdB-Record() from any required dB-table</li>
  <li>Fx-2: populateTable() with Fx-1 Data WITHOUT any formatting</li>
  <li>Fx-3: formatTable() later format table. <strong>And here is the problem</strong>.. this fx runs before population of Table</li>
  <li>getting sequence: Fx-1, Fx-3, Fx-2</li>
  <li>required sequence: Fx-1, Fx-2, Fx-3</li>
  </ol>
  
  <p>plz help me out :) thanks. i tried several-codes and learn (deferred obj, queue, pipe, when, then, done) but it seems im missing something.</p>
  
  <pre><code>$('#button').click(function() {
  $.when(
      //(fx-1)getDB-Records()
      $.ajax({
          url: '/echo/html/',
          success: function(data) {
              //call (fx-2) just populate table without formating
              populateTable(data);
          }
      })
  ).then( function(){
      //(fx-3) formatTable()
      console.log('Problem: Format table starts before population of Table');
   });
  
  });
  function populateTable(data){
      //(fx-2) just populate table without formating
      //takes a little time
      setTimeout(function (){console.log('populate Table'); }, 1);
  }
  </code></pre>