Speed up page load when fething dynamic data via ajax/getjson

I had a page that was loading data using getJSON,
and then looping through the resultset with each and populating a viewmodel using Knockout:

$.getJSON('../../api/AppointmentApi/UntreatedAppointments')
.done(function (data) {
$.each(data, function (i, avt) {
self.createAppointmentVM(avt);
});
});

The problem was that already at 50-60 records the actual view was taking quite a few seconds to load after the heading etc was drawn on the page.

The solution was to populate the viewmodel in pieces so the view could start to fill in with data while adding records in chunks.

Solution using setInterval:

 $.getJSON('/api/AppointmentApi/UntreatedAppointments')
.done(function (data) {
var n= 0;
var itr=setInterval(function() {
var apt = data[n];
self.createAppointmentVM(apt);
n++;
if (n== data.length) {
clearInterval(itr);
}
},50);
});


This solved the problem nicely and let the view start rendering immediately, and then continuing to fill in the blanks.