Javascript : Anonymous function, access to global variables

Question

After hours of search, I Have a problem with my code Below. In fact, I'm not very far from answer I think but I'm still blocked…

I have an anonymous function called inside a loop and I want to access and refresh global variables but I tried with window.myvariable, with another function and nothing happen…

this my code :

for (var i = 0; i < SHP_files.length; i++) {
            shapefile = new Shapefile({
                shp: "shp/polygon/"+SHP_files[i]+".shp",
                dbf: "shp/polygon/"+SHP_files[i]+".dbf",
                }, function(data) {

                    polygon_layer.addLayer(new L.GeoJSON(data.geojson,{onEachFeature: onEachFeature, style: polygonStyle}));
                    polygon_layer.addTo(map);
                    console.log(polygon_layer.getLayers()); // IS OK
                });
        };
        console.log(polygon_layer.getLayers()); // IS EMPTY !!

So, How i could transform this anonymous function in order to have something that I can access from my code who's following that ?

Thanks a lot, and sorry for my english not very good…

Answer 1

This is your typical problem with asynchronous code execution. You example code does NOT execute from top to bottom. In particular, your anonymous function does NOT get executed until Shapefile is done with whatever it is doing. In the meantime, your JS gets executed in order. Therefore, the last line of your above code, will probably execute before the anonymous function ever will.

To fix this, you will need to trigger any code that depends on the Shapefile response from within its callback:

for (var i = 0; i < SHP_files.length; i++) {
    shapefile = new Shapefile({
        shp: "shp/polygon/"+SHP_files[i]+".shp",
        dbf: "shp/polygon/"+SHP_files[i]+".dbf",
        }, function(data) {
            polygon_layer.addLayer(new L.GeoJSON(data.geojson,{onEachFeature: onEachFeature, style: polygonStyle}));
            polygon_layer.addTo(map);
            executeMoreCode();
        });
};

function executeMoreCode() {
    console.log(polygon_layer.getLayers()); // IS OK
}

Answer 2

Try defining your variables, in this case polygon_layer, outside of the for loop or the function. See the following example:

var f;
for(var i=0; i<5;i++){
    (function(){
        f = 10;
        console.log(f); // Outputs 10
    })();
}
console.log(f); // Also outputs 10