You should implement an asynchronous loop (using if
):
(function (ondone) {
var index = 0;
nextStep();
function nextStep() {
if (index >= jsonObj.potholes.length) {
if (ondone)
ondone();
return;
}
var i = index++;
var image = new Image();
image.src = "data:image/png;base64," + jsonObj.potholes[i].image;
image.onload = function () {
//alert("image loaded");
EXIF.getData(image, function () {
otn = parseInt(EXIF.getTag(image, "Orientation"));
dataURL = drawCanvas(otn, image).toDataURL();
var circle = L.circle([jsonObj.potholes[i].lat, jsonObj.potholes[i].lon], 18, {
color: 'yellow',
fillColor: 'red',
fillOpacity: 0.5
}).addTo(markersLayerGroup).bindPopup("Pothole ID " + jsonObj.potholes[i].id
+ "<br />Location " + city[i] + "," + street[i] +
"<image src = '" + dataURL + "'></image>");
nextStep();
});
}
}
})(function () { alert("Done!"); });
You could also use Promises for that, for example: JavaScript: Async Promise "while loop".