JavaScript / save variable values with callback

Question

I have the following code with Angular.js:

$scope.createSSH = function(){
             for (var j=0; j<allGroupsArrays.length; j++){
                for (var i=0; i<$scope.appArray.length; i++){
                  allGroupsArrays[j][i][6] = Boolean(0);
                  allGroupsArrays[j][i][7] = Boolean(0);
                  // Some irrelvant code
                  WClient.createSSHK(allGroupsArrays[j][i][2], allGroupsArrays[j][i][3], allGroupsArrays[j][i][4], i, allGroupsArrays[j], allGroupsArrays[j][i][7], j).then(
              function(data) {
                    console.log("The j is: " + j)
                    console.log("The i is: " + i)
                  },
              function(message) {
                    console.log("Error")
                  }

When the callback is backed, I notice that j and i variables value were note save. Instead, It prints the following:

The j is: 5
The i is: 3

These even when the callback was executed were i was 0 and j was 0.

How can I save the variable's values context?

That is correct. You'll always get those values. That's because while you execute the loop the callback wont be called until the createSSHK is done. Remember that is asynchronous. You may need to pass those variable to create SSHK and then accept it in callback. — Akshay Khandelwal, Dec 10 '14 at 08:11

score 0 · Answer 1 · answered Dec 10 '14 at 08:16

When callback function called, i and j values are taken from parent context, and as they are incremented, values will always be last incremented (5 and 3 respectively). To overcome this, you must pass current values to be used:

.then((function(i, j) {
    return function(data) {
        console.log("The j is: " + j)
        console.log("The i is: " + i)
    };
})(i, j))

Here you create function receiving current values (function(i, j) {...}, invoke it immediately (i, j)) and having them independent from parent context. This function returns function to be executed (return function(data) {...}). Now you have data passed by callback invoker and i j have values passed on createSSHK call.

score 0 · Answer 2 · answered Dec 10 '14 at 08:18

It's never a good idea to create functions in a loop. Try something like this:

$scope.createSSH = function(){
         for (var j=0; j<allGroupsArrays.length; j++){
            for (var i=0; i<$scope.appArray.length; i++){
              allGroupsArrays[j][i][6] = Boolean(0);
              allGroupsArrays[j][i][7] = Boolean(0);
              process(i ,j);
            }
         }

 function process(i, j){
              WClient.createSSHK(allGroupsArrays[j][i][2], allGroupsArrays[j][i][3], allGroupsArrays[j][i][4], i, allGroupsArrays[j], allGroupsArrays[j][i][7], j).then(
          function(data) {
                console.log("The j is: " + j)
                console.log("The i is: " + i)
              },
          function(message) {
                console.log("Error")
              }
 }

score 0 · Accepted Answer · edited May 23 '17 at 12:21

This is closure typical problem. Loops execute and after they are complete values i and j are 5 and 3 of course. However then callback functions still use these i and j values from the outer scope. What you need to do is to create a separate scope values.

One way to do it (and there are at least 6 ways!) is using Function.prototype.bind method of the function. It works because it creates new function with scoped values for i and j:

WClient.createSSHK(allGroupsArrays[j][i][2], allGroupsArrays[j][i][3], allGroupsArrays[j][i][4], i, allGroupsArrays[j], allGroupsArrays[j][i][7], j).then(
    function(i, j, data) {
        console.log("The j is: " + j)
        console.log("The i is: " + i)
    }.bind(null, i, j),

    function(message) {
        console.log("Error")
    }.bind(null, i, j)
);

Also take a look at this very popular question on the same subject.

Please note that `Function.prototype.bind` won't work in IE < 9 — Zudwa, Dec 11 '14 at 05:47

JavaScript / save variable values with callback

3 Answers3