Expensive Render using Each helper

1

I have an template using the #each helper to iterate across a collection on my controller. The problem is that rendering all of those elements in one shot is expensive and results in the run loop blocking the entire page while things render. I tried doing some delayed paging like this:

    model.get('items').then(function(items) {
        var appendPage = function() {
            Ember.$().imagesLoaded(function() {
                var toAppend = items.splice(0, perPage);
                controller.set('bufferedProducts', controller.get('bufferedProducts').concat(toAppend));
                if (items.length > 0) {
                    Ember.run.later(appendPage, 500);
                }   
            });
        };
        Ember.run.later(appendPage, 500);
    });

But this causes the template to re-render the entire collection instead of just appending the new items to the DOM. Is there a good Ember-ish way to do this, or a way for me to throttle how much time Ember spends in a particular part of the run loop?

2

Actually, it seems like converting to an ArrayController and calling addObjects does precisely what I want.

var perPage = 20;
model.get('items').then(function(items) {
    var appendPage = function() {
        Ember.$().imagesLoaded(function() {
            var toAppend = items.splice(0, perPage);
            controller.addObjects(toAppend);
            if (items.length > 0) {
                Ember.run.schedule('afterRender', appendPage);
            }   
        });
    };
    Ember.run.schedule('afterRender', appendPage);
});

I would still be curious to know whether or not it’s possible to throttle how much time Ember spends in a single run loop cycle, or in a particular run loop queue.