Javascript-форум - JQuerry Deferred

Имеется 3 блока по горизонтали, в которые надо запихать блоки с новостями. Новостные блоки разной высоты, подгружаются ajax, число подгружаемых блоков ограничено (т.е. нельзя за один проход подгрузить новости на всю страницу)

Код:

function load_elem(items){

if (app.calcul) return;



app.calcul = true;



var promise = $.when();

$.each(items, function(index, item){

    promise = promise.then(function(){

        return $.getJSON(item.url);

    }).then(function(data){



        $('#'+item.id).append(Mustache.render($('#'+item.template).html(),view));

        //*****

    });

});

promise.then(function(){

    console.log('OK');

    app.calcul = false;

});

}

Исходные данные

Код:

    var items_collection = [{

        "id" : "mini-article",

        "template" : "mini-article-template",

        "url" : "bla-bla",

        "autocomplete": false // - значит новости не нужно подгружать до конца страницы

    },

    {

        "id" : "popular-lists",

        "template" : "popular-lists-template",

        "url" : "bla-bla",

        "autocomplete": true  

    },

    {

        "id" : "pic-day-lists",

        "template" : "pic-day-lists-template",

        "url" : "bla-bla",

        "autocomplete": true   

    }];

Запуск:

Код:

load_elem([items_collection[0], items_collection[1], items_collection[2]]);

И вот я не пойму как сделать, чтобы там, где //***** - в случае если есть свободное место под новости и utocomplete=true, запускался бы этот же запрос и пока он не выполнился - никакие другие новости не подгружались бы, а потом наступал черед items_collection[1] и по аналогии..