callback function access to closure variables?

angularjs, closures, javascript, promise

Solution

This is a classic issue with asynchronous callbacks in a `for` loop. Both `s` and `s1` are only declared once. Even though you declare `var s1;` within the loop, JavaScript has no block scope, so it's irrelevant.

This means all iterations share the same variables `s` and `s1`, so when the callback completes, `$scope.products[s]` is looking up the `ids.length + 1` product.

Instead, do:

var ids = [];
ids = ['81074'];

function launchRequest(s) {
    $http.get('http://example.com/api/catalog/product/' + ids[s]).success(function (data) {
        $scope.products[s].setProductData(data);
    }).error(function (err) {
        console.log('--------- error', err);
    });
}

// show what's in
for (var s = 0; s < ids.length; s++) {
    launchRequest(s);
}

... which introduces a new function level scope inside `launchRequest`, which means `s` is still `s` inside the function when the callback resolves.

Problem

The following piece of code has a bug but it opened an interesting question. Its using an angular's $http service which returns a promise. Once resolved, the callback function does not have access to the s1 variable. ``` var ids = []; ids = ['81074']; // show what's in for (var s=0;s<ids.length;s++) { var s1 = s; $http.get('http://mydomain.com/api/catalog/product/' + ids[s]). success(function(data) { // console.log(s1); <--- reference error $scope.products[s].setProductData(data); }).error(function(err){ console.log('--------- error',err); }); }; ``` s1 gives ReferenceError: s1 is not defined in the debugger And interestingly, it does have access to the for loop variable s, which is always 1 - as expected, since the promise got resolved after its incremented (hence the bug BTW) Can someone explains why? thanks Lior

Original source