Parallel asyncronous XMLHttpRequests are only calling back once

Question

I am issuing two API calls in parallel, asynchronously so I don't lock up the browser , and I am only receiving one callback.

Here is the code

/* Loop runs twice, from 0 to 1 */
for(var AccountIndex in walletForm.masterpublicKey){
    /* Bunch of code, then... */

    /* Construct an API call to Insight */
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://insight.bitpay.com/api/addrs/" + stringOfAddresses + "/txs?from=0&to=100", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
        $scope.$apply(function () {
            txListInsight.txs[AccountIndex] = ( JSON.parse(xhr.responseText));
            /* Set semaphore */
            txListInsight.txsReady[AccountIndex] = true;
            parseTransactions(AccountIndex);
            console.log(txList);
        })
        }
    }
    xhr.send();
}

I can even see the two requests in the Chrome Dev Console Network Tab and the responses are correct. Why am I only getting one callback and not two? Is my second callback overwriting the reference to the first one?

Why is there a library on the Internet called “AsyncXMLHttpRequest”? I am using AngularJS as well--shall I look into "promises"?

Another option would be to avoid the problem entirely by combining my two API requests into one, but I'm not sure what the character limit is.

what happens if you construct an array of XMLHttpRequest objects, instead of overwriting the callback on each iteration — dm03514
– dm03514, Commented May 23, 2015 at 23:36
This is a classic closure in a loop problem. The variable xhr is closed over and the closure needs to be broken. — slebetman
– slebetman, Commented May 24, 2015 at 10:32

dm03514 · Accepted Answer · 2015-09-03 14:12:14Z

1

I think explicitly invoking function with the current AccountIndex should work, notice the closure

var xhrs = {};
for(var AccountIndex in walletForm.masterpublicKey){
    (function(AccountIndex) {

      xhrs[AccountIndex] = new XMLHttpRequest();
      xhrs[AccountIndex].open("GET", "https://insight.bitpay.com/api/addrs/" + stringOfAddresses + "/txs?from=0&to=100", true);
      xhrs[AccountIndex].onreadystatechange = function() {
        if (xhrs[AccountIndex].readyState == 4) {
        $scope.$apply(function () {
            txListInsight.txs[AccountIndex] = ( JSON.parse(xhrs[AccountIndex].responseText));
            /* Set semaphore */
            txListInsight.txsReady[AccountIndex] = true;
            parseTransactions(AccountIndex);
            console.log(txList);
        })
        }
      }
      xhrs[AccountIndex].send();
    })(AccountIndex);
}

edited Sep 3, 2015 at 14:12

answered May 23, 2015 at 23:38

dm03514

56.1k18 gold badges117 silver badges147 bronze badges

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

1 Comment

Andrew Over a year ago

Good idea. I tried it--it gives the same result, only one callback.

Collectives™ on Stack Overflow

Parallel asyncronous XMLHttpRequests are only calling back once

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related