In Backbone.js when models are fetched in a loop ,success of the individual models are executed only at the end of the loop

Question

Code of Collection Model and View

Backbone.Collection.extend({
    model: xModel,

    initialize: function(url) {
        this.targetUrl = url;
    },

    url: function () {
         return this.targetUrl;
    },

    parse: function (data) {
        return data.instances;
    }
}

Backbone.Model.extend({

    defaults: {
        location: '',
        xyz: ''
    },

    initialize: function (options) {

    },


    url: function () {
            return this.get('location');
        }
    }
}


renderInstances: function () {           
    this.collection = new xyzInstanceCollection(instPath);

        this.collection.fetch({
             success: _.bind(
                   function (data) {

                     for (var i = 0; i < this.collection.length; ++i) {
                     var model = this.collection.at(i);
                     model.fetch({
                          success: _.bind(
                               function (data) {
                                    /*Call a subView to run the data over a template
                                    and display the instance fetched*/                 
                                }, this),
                          error:
                               function (e, response) {
                                    /*Do Something else*/ 
                               }
                          });
                     }
             }, this),
             error:
                    function (e, response) {
                        /*Do Something*/
                    }
             }
    });

 }

Issue 1: Now I was expecting that the views of the instances that are called from the success callback will start rendering as soon as the fetch of that model gets the data, but what I see is Backbone.js first queues up all the ajax calls of the complete loop, then once all these calls have returned data , only then the views starts rendering,this happens irrespective of sync or async fetch, why is this so ?

Issue 2: If a refresh button is pressed before all models are fetched from this loop, the browser returns error in communication. How to abort these calls when user wants to route to another page without caring to see the results, there can be 1000s of xhr's returned from the loop of model fetches, I cannot collect them all and execute abort on them, is there any better way , please suggest.

Not sure about Issue 2, but Issue 1 is expected. Your code runs on 1 thread, so when `fetch` is async, a `success` callback cannot possibly run before the loop is done (both run on the same thread). Here's an answer to a similar question: http://stackoverflow.com/a/6659195/834178. Another: http://ejohn.org/blog/how-javascript-timers-work/ — Paul Hoenecke, Mar 23 '13 at 17:25
@PaulHoenecke - Thanks for the answer and the link which has a detailed explanation , I suspected the same however I am still looking to find if there are any ways to get around this.Regards. — javacoder, Mar 23 '13 at 17:30
However what i am confused about is why it behaves the same way when fetch is sync. — javacoder, Mar 23 '13 at 17:32
Don't use `async:false`. It will make it slower, because each fetch will block until complete and the success callback is called, then go on to the next fetch. However, if you did, I think the `success` callbacks would be called during the loop. You may not see the result of `success` callback because the DOM might not update until you loop is done. You can set breakpoints in dev tools and see what order things happen in. — Paul Hoenecke, Mar 23 '13 at 17:56

In Backbone.js when models are fetched in a loop ,success of the individual models are executed only at the end of the loop

0 Answers0