A way to render Knockout ObservableArray responsively

obserable-array-throttled-push.js

var newArray = [{foo: 'bar', ...}, ...];

// This will block the UI thread during the rendering. It will become problem if the array has around 1000 items.
self.obsArray(newArray);

// This way UI should be responsive during the rendering
throttledPush(self.obsArray, newArray);

function throttledPush(obsArray, array, items, timeout) {
  items = items || 5;
  timeout = timeout || 1;
  var cancel = false;

  var i = 0;
  function addItems() {
    if (cancel) return;

    obsArray.valueWillMutate();
    for (var j = 0; j < items && i < array.length; ++j && ++i) {
      obsArray().push(array[i]);
    }
    obsArray.valueHasMutated();
    if (i < array.length) setTimeout(addItems, timeout);
  }
  addItems();

  return {
    cancel: function() {
      cancel = true;
    },
  };
}