How To Track A Sync Variable In An Async Call

I am using protractor to run e2e test cases. All protractor calls are async calls. The below code is a protractor code : gridRow.then(function (rows) { for (var in

Solution 1:

What I usually do is wrap the callback function in another function to capture the sync variable in a new scope. To illustrate, what you have right now is effectively:

var callback = function(text) {
  // use text and index...
};
async_call(...).then(callback);

The problem is of course that the index variable (which is captured by the callback function) changes after the callback gets created. Because the callback function uses a closure to capture a reference to that value, it ends up seeing the changed value.

To capture the value of index during that particular loop iteration, you can create a new scope, with a new variable that doesn't get changed. Basically you create another function and call it with the current index, and the parameter for the function captures that specific value. Then you can have that function return another function that you use as your callback. Example code to clear up that horrible description:

functioncreateCallback(curIndex) {
  returnfunction(text) {
    // use text and curIndex...
  };
}

//...var callback = createCallback(index); // where index is the variable you are looping overasync_call(...).then(callback);

This can be written more compactly by making createCallback an anonymous function:

var callback = (function(curIndex){
  returnfunction(text) {
    // use text and curIndex...
  };
})(index);
async_call(...).then(callback);

For more information on closures and functions in JavaScript, see this comprehensive answer.