Javascript function (asynchronous) works in Mozilla FF but not in Chrome?

Question

I've been struggling to develop some code which uses an asynchronous function in javascript. The code all works fine in Mozilla, but Chrome console.log shows nothing...and no errors are logged.

The code processes an image object array, and uses an asynchronous function from the EXIF-js library to retrieve GPS coordinates from a geo-tagged image in the array. All that code works fine.

Using a callback I am able to console.log the location coordinates in Mozilla, but when I run the same code in Chrome I get nothing.

Is this a timing/speed of execution issue (with FF being perhaps slower and therefore having more time to produce values to display?)..I thought I avoided that by using callback function.

For orientation, here is how I understand this to work (reading from bottom up):

1. I declare the image array. It contains no gps data
2. I run getLocations (note the 's') passing the image array as the parameter to the function.
3. getLocations iterates through the array, creating an image object to pass to the getLocation (singular) function. the call includes a callback for the result.
4. getLocation runs EXIF.getData on the image, and after some conversion by convertDMtoDD loads the location array with the latitude and longitude.
5. getLocation then invokes callback, passing the location as the parameter.
6. console.log logs the values, but only if I use Mozilla, FF. Chrome displays nothing?!

function convertDMtoDD(coordinates, direction) {

  //convert the decimal minutes coordinate array to decimal degrees
  //set the sign based on direction where "S" or "E" is negative

  gpsdegrees = (coordinates[0]);
  gpsminutes = (coordinates[1]);
  leftminutes = Math.floor(gpsminutes);
  rightminutes = (gpsminutes - leftminutes) / 60;
  leftminutes = leftminutes / 60;
  rightminutes = leftminutes + rightminutes;
  degdecimal = (gpsdegrees + rightminutes).toFixed(6);

  if (direction == "S" || direction == "W") {
    degdecimal = 0 - degdecimal;
  }
  return degdecimal;
}

function getLocation(myimage, callback) {
  //EXIF.getData in the EXIF.js library gets the EXIF data from the raw image DOM object 
  myimage.onload = EXIF.getData(myimage, function() {
    //EXIF.getTag pulls the various data for each tag such as latitude, longitude, etc.
    //lati and longi are arrays containing decimalminutes values; latd and longd are single values of either "N", "S", "W", or "E")
    var lati = EXIF.getTag(this, "GPSLatitude");
    var latd = EXIF.getTag(this, "GPSLatitudeRef");

    var longi = EXIF.getTag(this, "GPSLongitude");
    var longd = EXIF.getTag(this, "GPSLongitudeRef");

    var location = [];
    //convert data from decimal minutes to decimal degrees and set direction as neg or pos
    location[0] = convertDMtoDD(lati, latd);
    location[1] = convertDMtoDD(longi, longd);

    callback(location);
  });
}

var images = [
  {
    name: 'Chateau Coussay',
    src: 'coussay.jpg'
  }, {
    name: 'Chateau Courlaine',
    src: 'coulaine.jpg'
  }, {
    name: 'Chateau Sainte-Chapelle',
    src: 'chapelle.jpg'
  }
];

function getLocations(imagelist) {
  for (var i = 0; i < imagelist.length; i++) {
    var myimage = new Image(); //create image object to pass to the getLocation function
    myimage.src = imagelist[i].src;
    getLocation(myimage, function(location) {
      console.log("latitude is " + location[0] + " longitude is " + location[1]);
    });
  }
}

getLocations(images);

Answer 1

Not sure if this is the culprit or not but the answer at image.onload event and browser cache suggests setting the onload handler prior to the src value. You could also try adding a cache-busting query parameter to the end of the URL in case there's some cacheing nastiness going on. Good luck!