title: Jquery looping and binding 10 records at a time
body: <p>I have a scenario where I get thousands of records from the server as JSON and bind all records to the page.  For each record, I am doing some calculations in jquery and binding data to UI. As record count is in 1000's the time take for calculation and binding data is more. Data on the page is bound at the end when all records calculations are done. Is there any option to bind data one by one or 10 by 10 and show binding on UI for that set. What I am trying to find is to execute $.each for 10 records at a time and append next set of 10 records to it and so on. any idea to make the page load faster? (Paging is not required for my requirement). Any clue can help.</p>
  
  <pre><code>&lt;div id="keepFinalDataHere"&gt;&lt;/div&gt;
  
  
  $.each(data, function (i, record) {
  
   content += "&lt;div&gt;" + record.id + "&lt;/div&gt;&lt;div&gt;" + record.fromId + "&lt;/div&gt;&lt;div&gt;" + record.subject + "&lt;/div&gt;";
          });
  
      $(content).appendTo('#keepFinalDataHere');
  </code></pre>
  
  <p>In above code, content is built by getting several thousands of records and once the content is built, then it is being bound to the div. I am looking for an option to get first 10 items bind the data to make sure that users feel like the page is loaded, and then APPEND remaining items in sets of 100 or so to existing list.</p>