将参数传递给ajax回调

Question

I have a javascript function which must get a file and pass it with another parameter:

getJsonFile = function(fileName, callback, error, data) {
        var ajaxOptions = {
            url: util.pathJoin([Options.server_cache_path, jsonRelativeFileName]),
            type: "GET",
            dataType: "json",
            success: function(album) {
                callback(album, data)
            },
            error: error
        };

The getJsonFile function is called many times in for cycles throughout the application.

However, in the callback function, I sometimes find that the value of data is altered... Why does it happen? What's the solution?

Answer 1

As you described above, you are calling getJsonFile function from a loop (for) and most likely passing the data parameter as reference. In that scenario, you are passing a pointer to a variable which is changing in every loop iteration and by the time the success callback is invoked, data parameter has a reference to a different object from the original call.

One way to fix this kind of problems is to make copies of the parameters you received (or at least from data ) OR capture the value you are interested in using a closure to capture the current data referenced value.

getJsonFile = function(fileName, callback, error, data) {
        var callbackCall = (function(myData) { 
            return function(myAlbum) { callback(myAlbum, myData); };
        })(data);
        var ajaxOptions = {
            url: util.pathJoin([Options.server_cache_path, jsonRelativeFileName]),
            type: "GET",
            dataType: "json",
            success: function(album) {
                callbackCall(album);
            },
            error: error
        };

Avoiding the callbackCall variable

getJsonFile = function(fileName, callback, error, data) {
   // Code omitted...
   success: (function(myData) { 
            return function(album) { callback(album, myData); };
   })(data)
   // Code omitted...
}