骨干点击事件回调中的奇怪索引问题

Question

I have this code, it's independent and isolated. The problem I am having is that the index i is starting at 1 instead of starting at 0. I have no idea why this could be, and doesn't seem to have anything to do with the closure that I am pushing into the deletes array...but I can't be sure, no idea what the issue is.

    onClickResetAll: function (event) {
                    event.preventDefault();

                    var deletes = [];

                    Object.keys(collections).forEach(function (key) {
                        if (collections.hasOwnProperty(key)) {

                            var coll = collections[key];

                            for (var i = 0; i < coll.models.length; i++) {

                                deletes.push(function (callback) {

                                    var index = i; //i starts at 1, not 0 !!!
                                    coll.models[index].deleteModel(function (err, resp, x) {

                                        console.log(err, resp, x);

                                        if(err){
                                            callback(err);
                                        }
                                        else{
                                            callback(null,null);
                                        }

                                    });
                                });
                            }

                        }
                    });

                    async.parallel(deletes,function(err,results){

                        Backbone.Events.trigger('bootRouter',  '+refreshCurrentPage');

                    });

                }, //end of onClickResetAll callback function

//end

Answer 1

The problem isn't really that i starts at one, the problem is that i will be coll.models.length for every function in deletes . Why would that be? Well, each function is sharing the same i and i won't be evaluated until the functions inside deletes are actually called.

The solution is to force i to be evaluated when it has the value you want (ie evaluated i when you're building the callback function). There are various solutions and they're all variations on the "wrap it in a function to break the reference" theme:

1. Use an iterator with a callback function instead of a plain for loop:

    coll.each(function(model, i) { // `model` is the model from the collection, `i` is the loop index. }); 

   You can use each here because Backbone collections have a bunch of Underscore functions built in .

2. Wrap the loop body in an SIF:

    for(var i = 0; i < coll.models.length; ++i) (function(i) { //... })(i); 

3. Use a separate function to build your functions:

    function make_deleter(coll, i) { return function(callback) { coll.models[i].deletedModel(function(err, resp, x) { //... } } } //... for(var i = 0; i < coll.models.length; ++i) deletes.push(make_deleter(coll, i)); 

They all do pretty much the same thing: add an extra function call into the mix to force i to be evaluated (rather than just referenced) on each iteration of the loop.

In a Backbone situation, 1 would probably be the most natural and you wouldn't even need your troublesome i with that approach.

Answer 2

another solution to this is using async.each or async.eachSeries instead of async.parallel. using the first 2 avoids pushing to an array of functions altogether.