Javascript - Handling race condition on async function call

Question

This weekend, I ran into a peculiar problem of handling race conditions in Javascript.

Here is the code that was giving me problem:

function myFunction(requestObj, myArray) {
	for(var i=0;i<myArray.length;i++) {
		//AJAX call
		makeAjaxCall(requestObj, function(data) {
		  //Callback for the ajax call
		  //PROBLEM : HOW CAN I ACCESS VALUE OF 'i' here for the iteration for which the AJAX call was made!!!
		}
	}
}

Accessing the value of 'i' inside the AJAX callback would not give me the expected value because by the time AJAX call response comes back, the 'for' loop would have crossed many more iterations.

To handle this, I used the following approach:

function myFunction(requestObj, myArray) {
	var i = 0;

	function outerFunction() {
		makeAjaxCall(requestObj, innerFunction);
	}

	function innerFunction(data) {
	  i++;
	  if(i<myArray.length) {
	  	outerFunction();
	  }
	}

	outerFunction();
}

Is this the correct approach? Any other way I can improve this assuming it is a 3rd pary AJAX library call which I can't modify.

Evan Davis · Accepted Answer · 2015-04-27 13:59:09Z

4

You just need to use a closure:

function myFunction(requestObj, myArray) {
    for(var i=0;i<myArray.length;i++) {
        //AJAX call closed over i
        (function(i) { // wrap your call in an anonymous function
          makeAjaxCall(requestObj, function(data) {
            // i is what you think it is
          }
        })(i) // pass i to the anonymous function and invoke immediately
    }
}

answered Apr 27, 2015 at 13:59

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2015-04-27 14:00:57Z

The issue is that the callbacks you're passing to the ajax call have an enduring reference to i, not a copy of its value when they were created.

Your approach is fine except that it waits to make the second ajax call until the first finishes, then waits for the second to finish before the third, etc. Unless you have to do that (and I get the impression you don't), it's better to let them overlap.

A couple of options:

Use a builder function:

function myFunction(requestObj, myArray) {
    for(var i=0;i<myArray.length;i++) {
        //AJAX call
        makeAjaxCall(requestObj, buildHandler(i));
    }
    function buildHandler(index) {
        return function(data) {
            // Use `index` here
        };
    }
}

Now, the handler has a reference to index, which doesn't change, rather than i, which does.

Use Function#bind:
```
function myFunction(requestObj, myArray) {
    for(var i=0;i<myArray.length;i++) {
        //AJAX call
        makeAjaxCall(requestObj, function(index, data) {
            // Use index here
        }.bind(null, i));
    }
}
```
Function#bind creates a function that, when called, will call the original function with a specific this value (we're not using that above) and any arguments you pass bind — followed by any arguments given to the bound function.

I prefer #1: It's clear to read and doesn't create a bunch of unnecessary functions (whereas in theory, #2 creates two functions per loop rather than just one).

Patrick Evans · Accepted Answer · 2015-04-27 14:06:16Z

There are two other ways of doing this: using bind, using a closure

Using bind:

function myFunction(requestObj, myArray) {
    for(var i=0;i<myArray.length;i++) {
        makeAjaxCall(requestObj, function(idx,data) {
          //idx will be correct value
        }.bind(null,i));
    }
}

Using a closure:

function myFunction(requestObj, myArray) {
    for(var i=0;i<myArray.length;i++) {
        (function(idx){
           makeAjaxCall(requestObj, function(data) {
             //idx will be correct value 
           });
        })(i);
    }
}

There is also third method, use another function to create your callback

function myFunction(requestObj, myArray) {
    function makeCB(idx){
       return function(){
          //do stuff here
       }
    }
    for(var i=0;i<myArray.length;i++) {
        makeAjaxCall(requestObj, makeCB(i));
    }
}

Collectives™ on Stack Overflow

Javascript - Handling race condition on async function call

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related