riddle: the worth inside the sealed envelope alters

Question

riddle: the worth inside the sealed envelope alters

When it comes to geocoding, I rely on

http://tile.cloudmade.com/wml/latest/web-maps-lite.js

.

I have an array filled with approximately 20 addresses.

addresses[n] = {where:where,who:who,contact:contact,note:note,type:type};

My process involves looping through this array for geocoding purposes.

for (var i = 0; i < addresses.length; i++) {
    geocoder2.getLocations(addresses[i].where, function(response) { //a callback
       return function(k){
       Lat[k] = response.features[0].centroid.coordinates[0];
       Lng[k] = response.features[0].centroid.coordinates[1];
       latlng = new google.maps.LatLng(Lat[k], Lng[k]);
        MarkerArray[k] = new google.maps.Marker({
          map: map,
          position: latlng,
          zIndex: k,
          title: addresses[k].who,
          icon: icons(addresses[k].type.trim())
        });}(i) // a closure function called
    });
}

Despite the setup, I keep encountering an issue where it only works on the final index. Why could that be?

javascript callback closures

Answer 1

Answer №1

You are facing the Closure Loop Problem. Your attempt to solve it by inserting the return function(k)... closure is not working because it is inside the callback function. Therefore, it will only execute once the loop has finished and i is at its final value.

To resolve this issue, you need to move that wrapper outside of the loop so it is directly within the loop:

for (var i = 0; i < addresses.length; i++) {
    geocoder2.getLocations(addresses[i].where, function(k) { //a callback
        return function(response){
            Lat[k] = response.features[0].centroid.coordinates[0];
            Lng[k] = response.features[0].centroid.coordinates[1];
            latlng = new google.maps.LatLng(Lat[k], Lng[k]);
            MarkerArray[k] = new google.maps.Marker({
                map: map,
                position: latlng,
                zIndex: k,
                title: addresses[k].who,
                icon: icons(addresses[k].type.trim())
            });
        }
    }(i)); // binding *here* instead!
}

Alternatively, you can utilize Function#bind to avoid using a nested function.

Answer 2

You are facing the Closure Loop Problem. Your attempt to solve it by inserting the return function(k)... closure is not working because it is inside the callback function. Therefore, it will only execute once the loop has finished and i is at its final value.

To resolve this issue, you need to move that wrapper outside of the loop so it is directly within the loop:

for (var i = 0; i < addresses.length; i++) {
    geocoder2.getLocations(addresses[i].where, function(k) { //a callback
        return function(response){
            Lat[k] = response.features[0].centroid.coordinates[0];
            Lng[k] = response.features[0].centroid.coordinates[1];
            latlng = new google.maps.LatLng(Lat[k], Lng[k]);
            MarkerArray[k] = new google.maps.Marker({
                map: map,
                position: latlng,
                zIndex: k,
                title: addresses[k].who,
                icon: icons(addresses[k].type.trim())
            });
        }
    }(i)); // binding *here* instead!
}

Alternatively, you can utilize Function#bind to avoid using a nested function.

riddle: the worth inside the sealed envelope alters

Answer №1

Similar questions

JavaScript allows for the immediate termination of CSS animations

Executing a quick shallow copy of an object in a single ReactJS operation

Error encountered: "selenium.common.exceptions.WebDriverException: Message: An error occurred - the script should be of type string when using the execute_script() function with Selenium in Python"

Submitting the form with an extending controller results in an undefined state

Issues encountered when trying to execute npm start: "The function this.htmlWebpackPlugin.getHooks is not recognized."

Slideshow Display Suddenly Halts at the Last Image

Guide on catching network errors using Axios request interceptor?

ReferenceError: _jquery2.default.ajax is not a function" encountered in a React Native application

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

Reloading the page silently in the background

What is the best way to customize the border color of a disabled Material UI TextField?

Concerns have been raised regarding the lack of light and shadows being detected by THREE.BufferGeometry in JavaScript/th

Troubleshooting issues with the 'date' input type feature on mobile devices

Ways to transfer the value of a JavaScript variable to a PHP variable

Occasionally, data may fail to be fetched when using a Jquery GET

Tips for including an additional class in an element

Perform the multiplication operation on two values retrieved from the API response and then calculate the total sum

Retrieving a time series data set from a JSON stream

Using Jquery's append() method to dynamically alter the HTML content

exchanging the positions of two animated flipdivs